@openkfw/design-tokens 0.5.7 → 0.5.9

package/demo/dist/css/style.min.css

@@ -1 +1 @@
-@layer reset,core,third-party,components,utility;@layer core.tokens,core.base,core.variations;@layer third-party.imports,third-party.overrides;@layer components.base,components.variations;@layer reset{*,*:after,*:before{box-sizing:border-box}:focus-visible{outline-offset:3px}:where(html){-webkit-text-size-adjust:none;text-size-adjust:none}:where(html){line-height:1.5}:where(html){scrollbar-gutter:stable}:where(h1){font-size:2em;margin-block:.67em}:where(abbr[title]){cursor:help;text-decoration-line:underline;text-decoration-style:dotted}@media(forced-colors:active){mark{color:HighlightText;background-color:Highlight}}:where(del,ins,s):before,:where(del,ins,s):after{clip-path:inset(100%);clip:rect(1px,1px,1px,1px);height:1px;width:1px;overflow:hidden;position:absolute;white-space:nowrap;content:"test"}:where(s):before{content:"stricken text start "}:where(s):after{content:" stricken text end"}:where(del):before{content:"deletion start "}:where(del):after{content:" deletion end"}:where(ins):before{content:"insertion start "}:where(ins):after{content:" insertion end"}:where(audio,iframe,img,svg,video){max-block-size:100%;max-inline-size:100%}:where(fieldset){min-inline-size:0}:where(label):has(+:where(textarea,input,select)){display:block}:where(textarea:not([rows])){min-block-size:6em}:where(button,input,select,textarea){font-family:inherit;font-size:inherit}:where([type=search]){-webkit-appearance:textfield}@supports (-webkit-touch-callout: none){:where([type=search]){border:1px solid -apple-system-secondary-label;background-color:canvas}}:where([type=tel],[type=url],[type=email],[type=number]):not(:placeholder-shown){direction:ltr}:where(table){border-collapse:collapse;border:1px solid}:where(th,td){border:1px solid;padding:.25em .5em}:where(dialog)::backdrop{background:#0000004d}:where(dialog),:where(dialog)::backdrop{opacity:0;transition:opacity .3s ease-out,display .3s allow-discrete,overlay .3s allow-discrete}:where(dialog[open]),:where(dialog[open])::backdrop{opacity:1}@starting-style{:where(dialog[open]),:where(dialog[open])::backdrop{opacity:0}}[hidden]:not([hidden=until-found]){display:none!important}}@layer core.tokens{:root,:host,.kfw-theme--light{color-scheme:light}:root,:host,.kfw-theme--light{--kfw-base-color-blue-100: #e9f5fb;--kfw-base-color-blue-400: #54b3e2;--kfw-base-color-blue-500: #007abc;--kfw-base-color-blue-600: #005a8c;--kfw-base-color-blue-700: #00446e;--kfw-base-color-blue-800: #00375b;--kfw-base-color-green-100: #ecfded;--kfw-base-color-green-300: #b7f9aa;--kfw-base-color-green-400: #94eb90;--kfw-base-color-green-700: #398357;--kfw-base-color-white-90: #ffffffe6;--kfw-base-color-white-95: #fffffff2;--kfw-base-color-white: #ffffff;--kfw-base-color-black: #000000;--kfw-base-color-gray-50: #f6f7f8;--kfw-base-color-gray-100: #eef0f2;--kfw-base-color-gray-200: #d8dfe3;--kfw-base-color-gray-300: #a1adb5;--kfw-base-color-gray-400: #6d767d;--kfw-base-color-gray-500-10: #41484c1a;--kfw-base-color-gray-500-30: #41484c4d;--kfw-base-color-gray-500-90: #41484ce6;--kfw-base-color-gray-500: #41484c;--kfw-base-color-gray-600: #2d3134;--kfw-base-color-violet-400: #9598e0;--kfw-base-color-violet-500: #686fc8;--kfw-base-color-red-400: #c80538;--kfw-base-color-yellow-500: #eac80b;--kfw-base-fontfamily-sans: "KfW Centro Sans", Arial, "Helvetica Neue", Helvetica, sans-serif;--kfw-base-fontfamily-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;--kfw-base-space-static-5: .5rem;--kfw-base-space-static-10: 1rem;--kfw-base-space-static-15: 1.5rem;--kfw-base-space-static-20: 2rem;--kfw-base-space-static-25: 2.5rem;--kfw-base-space-static-30: 3rem;--kfw-base-space-static-35: 3.5rem;--kfw-base-space-static-40: 4rem;--kfw-base-space-static-50: 5rem;--kfw-base-space-static-60: 6rem;--kfw-base-space-fluid-5-min: .5rem;--kfw-base-space-fluid-5-max: 1rem;--kfw-base-space-fluid-5-val: .735vi + .588px;--kfw-base-space-fluid-10-min: 1rem;--kfw-base-space-fluid-10-max: 1.5rem;--kfw-base-space-fluid-10-val: .735vi + .5588rem;--kfw-base-space-fluid-15-min: 1.5rem;--kfw-base-space-fluid-15-max: 2rem;--kfw-base-space-fluid-15-val: .735vi + 1.0588rem;--kfw-base-space-fluid-20-min: 2rem;--kfw-base-space-fluid-20-max: 2.5rem;--kfw-base-space-fluid-20-val: .735vi + 1.5588rem;--kfw-base-space-fluid-25-min: 2.5rem;--kfw-base-space-fluid-25-max: 3rem;--kfw-base-space-fluid-25-val: .735vi + 2.0588rem;--kfw-base-space-fluid-30-min: 3rem;--kfw-base-space-fluid-30-max: 3.5rem;--kfw-base-space-fluid-30-val: .735vi + 2.5588rem;--kfw-base-space-fluid-35-min: 3.5rem;--kfw-base-space-fluid-35-max: 4rem;--kfw-base-space-fluid-35-val: .735vi + 3.0588rem;--kfw-base-space-fluid-40-min: 4rem;--kfw-base-space-fluid-40-max: 5rem;--kfw-base-space-fluid-40-val: 1.471vi + 3.1176rem;--kfw-base-space-fluid-50-min: 5rem;--kfw-base-space-fluid-50-max: 6rem;--kfw-base-space-fluid-50-val: 1.471vi + 4.1176rem;--kfw-base-fontsize-static-sm: 1.4rem;--kfw-base-fontsize-static-md: 1.6rem;--kfw-base-fontsize-static-lg: 1.8rem;--kfw-base-fontsize-static-xl: 2rem;--kfw-base-fontsize-static-2xl: 2.2rem;--kfw-base-fontsize-static-3xl: 2.4rem;--kfw-base-fontsize-static-4xl: 2.6rem;--kfw-base-fontsize-static-5xl: 2.8rem;--kfw-base-fontsize-static-6xl: 3rem;--kfw-base-fontsize-static-7xl: 3.2rem;--kfw-base-fontsize-static-8xl: 3.6rem;--kfw-base-fontsize-fluid-sm-min: 1.4rem;--kfw-base-fontsize-fluid-sm-max: 1.6rem;--kfw-base-fontsize-fluid-sm-val: .294vi + 1.2235rem;--kfw-base-fontsize-fluid-md-min: 1.6rem;--kfw-base-fontsize-fluid-md-max: 1.8rem;--kfw-base-fontsize-fluid-md-val: .294vi + 1.4235rem;--kfw-base-fontsize-fluid-lg-min: 1.8rem;--kfw-base-fontsize-fluid-lg-max: 2rem;--kfw-base-fontsize-fluid-lg-val: .294vi + 1.6235rem;--kfw-base-fontsize-fluid-xl-min: 2rem;--kfw-base-fontsize-fluid-xl-max: 2.2rem;--kfw-base-fontsize-fluid-xl-val: .294vi + 1.8235rem;--kfw-base-fontsize-fluid-2xl-min: 2.2rem;--kfw-base-fontsize-fluid-2xl-max: 2.4rem;--kfw-base-fontsize-fluid-2xl-val: .294vi + 2.0235rem;--kfw-base-fontsize-fluid-3xl-min: 2.4rem;--kfw-base-fontsize-fluid-3xl-max: 2.6rem;--kfw-base-fontsize-fluid-3xl-val: .294vi + 2.2235rem;--kfw-base-fontsize-fluid-4xl-min: 2.6rem;--kfw-base-fontsize-fluid-4xl-max: 2.8rem;--kfw-base-fontsize-fluid-4xl-val: .294vi + 2.4234999999999998rem;--kfw-base-fontsize-fluid-5xl-min: 2.8rem;--kfw-base-fontsize-fluid-5xl-max: 3.2rem;--kfw-base-fontsize-fluid-5xl-val: .588vi + 2.4471rem;--kfw-base-fontsize-fluid-6xl-min: 3rem;--kfw-base-fontsize-fluid-6xl-max: 3.6rem;--kfw-base-fontsize-fluid-6xl-val: .882vi + 2.4706rem;--kfw-base-lineheight-2xs: 1.2;--kfw-base-lineheight-xs: 1.3;--kfw-base-lineheight-sm: 1.333;--kfw-base-lineheight-md: 1.4;--kfw-base-lineheight-lg: 1.5;--kfw-base-borderradius-sm: 2px;--kfw-base-borderradius-md: .4rem;--kfw-base-borderradius-lg: 2rem;--kfw-base-borderradius-circle: 999.9rem;--kfw-base-borderwidth-md: 1px;--kfw-base-borderwidth-lg: 2px;--kfw-base-fontweight-regular: 400;--kfw-base-fontweight-medium: 500;--kfw-base-letterspacing-tight: -.5px;--kfw-base-letterspacing-normal: 0;--kfw-base-letterspacing-wide: .5px;--kfw-base-letterspacing-wider: 1px;--kfw-base-layout-breakpoint-xs: 320px;--kfw-base-layout-breakpoint-sm: 600px;--kfw-base-layout-breakpoint-md: 840px;--kfw-base-layout-breakpoint-lg: 960px;--kfw-base-layout-breakpoint-xl: 1280px;--kfw-base-layout-container-sm: 89.6rem;--kfw-base-layout-container-md: 108rem;--kfw-base-layout-container-lg: 128rem;--kfw-base-layout-safezone-static-md: 2rem;--kfw-base-layout-safezone-static-lg: 4rem;--kfw-base-layout-safezone-fluid-min: 2rem;--kfw-base-layout-safezone-fluid-max: 4rem;--kfw-base-layout-safezone-fluid-val: 2.941vi + .2353rem;--kfw-base-layout-gridcolumn-1: 1;--kfw-base-layout-gridcolumn-2: 2;--kfw-base-layout-gridcolumn-3: 3;--kfw-base-layout-gridcolumn-4: 4;--kfw-base-layout-gridcolumn-6: 6;--kfw-base-layout-gridcolumn-8: 8;--kfw-base-layout-gridcolumn-12: 12;--kfw-base-layout-gridgap-static-xs: 1.2rem;--kfw-base-layout-gridgap-static-sm: 1.8rem;--kfw-base-layout-gridgap-static-md: 2.2rem;--kfw-base-layout-gridgap-static-lg: 2.6rem;--kfw-base-layout-gridgap-static-xl: 3.6rem;--kfw-base-layout-gridgap-fluid-min: 1.2rem;--kfw-base-layout-gridgap-fluid-max: 3.6rem;--kfw-base-layout-gridgap-fluid-val: 3.529vi - .9176rem;--kfw-color-fn: #005a8c;--kfw-color-fn-active: #00446e;--kfw-color-fn-inactive: #a1adb5;--kfw-color-fn-border: #2d3134;--kfw-color-fn-label: #2d3134;--kfw-color-text: #2d3134;--kfw-color-text-on-dark-bg: #ffffff;--kfw-color-text-on-disabled: #ffffff;--kfw-color-text-headline-on-dark-bg: #b7f9aa;--kfw-color-background: #ffffff;--kfw-color-background-subtle: #f6f7f8;--kfw-color-background-disabled: #a1adb5;--kfw-color-background-light-blue: #e9f5fb;--kfw-color-background-light-green: #ecfded;--kfw-color-background-dark-blue: #00375b;--kfw-color-background-dark-green: #398357;--kfw-color-opaque-white-90: #ffffffe6;--kfw-color-opaque-white-95: #fffffff2;--kfw-color-opaque-gray-500-10: #41484c1a;--kfw-color-opaque-gray-500-30: #41484c4d;--kfw-color-opaque-gray-500-90: #41484ce6;--kfw-color-state-danger: #c80538;--kfw-color-state-success: #398357;--kfw-color-state-warning: #9598e0;--kfw-color-status-red: #c80538;--kfw-color-status-yellow: #eac80b;--kfw-color-status-green: #398357;--kfw-color-line-6: #00446e;--kfw-color-line-7: #2d3134;--kfw-color-line-8: #a1adb5;--kfw-color-line-9: #005a8c;--kfw-color-line-10: #2d3134;--kfw-color-line-11: #b7f9aa;--kfw-color-line-12: #a1adb5;--kfw-color-product-container: #f6f7f8;--kfw-color-product-benefit: #007abc;--kfw-color-product-credit: #398357;--kfw-color-product-cooperation: #686fc8;--kfw-color-product-credit-benefit: #41484c;--kfw-color-icon: #005a8c;--kfw-color-icon-secondary: #54b3e2;--kfw-color-icon-disabled: #398357;--kfw-color-icon-disabled-secondary: #94eb90;--kfw-fontfamily: "KfW Centro Sans", Arial, "Helvetica Neue", Helvetica, sans-serif;--kfw-fontfamily-code: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;--kfw-space-xsmall: 1rem;--kfw-space-small: 2rem;--kfw-space-medium: 3rem;--kfw-space-large-min: 3.5rem;--kfw-space-large-max: 4rem;--kfw-space-large-val: .735vi + 3.0588rem;--kfw-space-big-min: 5rem;--kfw-space-big-max: 6rem;--kfw-space-big-val: 1.471vi + 4.1176rem;--kfw-fontspace: 2rem;--kfw-fontspace-2xsmall: .5rem;--kfw-fontspace-xsmall: 1rem;--kfw-fontspace-small: 1.5rem;--kfw-fontspace-large: 3rem;--kfw-fontspace-heading-1: 2rem;--kfw-fontspace-heading-2: 2rem;--kfw-fontspace-heading-3: 1rem;--kfw-fontspace-heading-4: 1rem;--kfw-fontspace-heading-5: 1rem;--kfw-fontspace-heading-6: 1rem;--kfw-fontsize: 1.6rem;--kfw-fontsize-introduction: 2rem;--kfw-fontsize-large: 1.8rem;--kfw-fontsize-small: 1.4rem;--kfw-fontsize-heading-1-min: 3rem;--kfw-fontsize-heading-1-max: 3.6rem;--kfw-fontsize-heading-1-val: .882vi + 2.4706rem;--kfw-fontsize-heading-2-min: 2.8rem;--kfw-fontsize-heading-2-max: 3.2rem;--kfw-fontsize-heading-2-val: .588vi + 2.4471rem;--kfw-fontsize-heading-3-min: 2.4rem;--kfw-fontsize-heading-3-max: 2.6rem;--kfw-fontsize-heading-3-val: .294vi + 2.2235rem;--kfw-fontsize-heading-4-min: 2rem;--kfw-fontsize-heading-4-max: 2.2rem;--kfw-fontsize-heading-4-val: .294vi + 1.8235rem;--kfw-fontsize-heading-5: 1.8rem;--kfw-fontsize-heading-6: 1.6rem;--kfw-lineheight: 1.4;--kfw-lineheight-list: 1.5;--kfw-lineheight-heading: 1.3;--kfw-lineheight-heading-5: 1.333;--kfw-borderradius: .4rem;--kfw-borderradius-large: 2rem;--kfw-borderradius-small: 2px;--kfw-borderradius-circle: 999.9rem;--kfw-borderwidth: 1px;--kfw-borderwidth-large: 2px;--kfw-focusring-outline-width: 2px;--kfw-focusring-outline-offset: 2px;--kfw-focusring-outline-style: dashed;--kfw-fontweight: 400;--kfw-fontweight-bold: 500;--kfw-breakpoint-mobile: 600px;--kfw-breakpoint-tablet: 840px;--kfw-breakpoint-desktop: 960px;--kfw-breakpoint-desktop-large: 1280px;--kfw-contentwrapper-narrow: 89.6rem;--kfw-contentwrapper-basic: 108rem;--kfw-contentwrapper-extended: 128rem;--kfw-safezone-min: 2rem;--kfw-safezone-max: 4rem;--kfw-safezone-val: 2.941vi + .2353rem}}@layer core{@layer tokens{:root{--kfw-icon-arrow-down: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='%232d3134' viewBox='0 0 24 24'%3E%3Cpath d='m2.146 7.852.706-.706a.5.5 0 0 1 .706 0l8.448 8.238 8.436-8.238a.5.5 0 0 1 .706 0l.706.706a.5.5 0 0 1 0 .706l-9.495 9.296a.5.5 0 0 1-.706 0L2.146 8.558a.5.5 0 0 1 0-.706'/%3E%3C/svg%3E");--kfw-icon-arrow-down-fn: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='%23005a8c' viewBox='0 0 24 24'%3E%3Cpath d='m2.146 7.852.706-.706a.5.5 0 0 1 .706 0l8.448 8.238 8.436-8.238a.5.5 0 0 1 .706 0l.706.706a.5.5 0 0 1 0 .706l-9.495 9.296a.5.5 0 0 1-.706 0L2.146 8.558a.5.5 0 0 1 0-.706'/%3E%3C/svg%3E");--kfw-icon-calendar-fn: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='%23005a8c' viewBox='0 0 24 24'%3E%3Ctitle%3Eicon/kalender%3C/title%3E%3Cpath fill='%23005a8c' fill-rule='evenodd' d='M7.5 2a.5.5 0 0 1 .5.5V4h8V2.5c0-.277.223-.5.5-.5h1a.5.5 0 0 1 .5.5V4h3.5a.5.5 0 0 1 .5.5v17a.5.5 0 0 1-.5.5h-19a.5.5 0 0 1-.5-.5v-17c0-.277.223-.5.5-.5H6V2.5c0-.277.223-.5.5-.5ZM20 6H4v14h16zM7.5 16a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5Zm5 0a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5Zm5 0a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5Zm-10-4a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5Zm5 0a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5Zm5 0a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5Zm-10-4a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5Zm5 0a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5Zm5 0a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5Z'/%3E%3C/svg%3E");--kfw-icon-time-fn: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='%23005a8c' viewBox='0 0 24 24'%3E%3Ctitle%3E01_Elemente (ATOME, MOLECULES)/Icons/Funktionsicons/Positiv/spaeter_festlegen%3C/title%3E%3Cpath fill='%23005a8c' fill-rule='evenodd' d='M12 2c5.5 0 10 4.5 10 10s-4.5 10-10 10S2 17.5 2 12 6.5 2 12 2m0 2c-4.4 0-8 3.6-8 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8m.4 3c.3 0 .5.2.5.5v5.3l2.6 2.6c.2.2.2.5 0 .7l-.7.7c-.2.2-.5.2-.7 0l-3.2-3.2V7.5c0-.3.2-.5.5-.5Z'/%3E%3C/svg%3E");--kfw-safezone: clamp(var(--kfw-safezone-min), var(--kfw-safezone-val), var(--kfw-safezone-max));--kfw-space-large: clamp(var(--kfw-space-large-min), var(--kfw-space-large-val), var(--kfw-space-large-max));--kfw-space-big: clamp(var(--kfw-space-big-min), var(--kfw-space-big-val), var(--kfw-space-big-max));--headline-color: var(--kfw-color-text);--kfw-focusring-outline-color: var(--kfw-color-fn-active)}}@layer base{:root{font-size:62.5%;font-family:var(--kfw-fontfamily);background-color:var(--kfw-color-background);color:var(--kfw-color-text);line-height:var(--kfw-lineheight);font-weight:var(--kfw-fontweight);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*:focus-visible{outline:var(--kfw-focusring-outline-width) var(--kfw-focusring-outline-style) var(--kfw-focusring-outline-color);outline-offset:var(--kfw-focusring-outline-offset)}body{margin:0;font-size:1.6rem}strong,b{font-weight:var(--kfw-fontweight-bold)}small{font-size:80%}:where(sub,sup){position:relative;line-height:0;vertical-align:baseline;font-size:75%}sub{bottom:-.25em}sup{top:-.5em}:where(address,blockquote,dl,ol,p,pre,table,ul){margin-block:0 var(--kfw-fontspace)}:where(address,blockquote,dl,ol,p,pre,table,ul):last-child{margin-block-end:0}ul,ol,menu{list-style:none inside none;padding-inline-start:0}mark{padding:.125rem .25rem;vertical-align:baseline;background-color:var(--kfw-color-background-dark-blue);color:var(--kfw-color-text-on-dark-bg)}blockquote{margin-inline:0}blockquote footer{margin-block-start:var(--kfw-fontspace-2xsmall)}table{width:100%;border-collapse:collapse;border-spacing:0;border-left:0;border-right:0;text-indent:0;overflow:visible;border-top:var(--kfw-borderwidth) solid var(--kfw-color-line-10);border-bottom:var(--kfw-borderwidth-large) solid var(--kfw-color-line-7)}tr{background-color:var(--kfw-color-background)}thead tr{border-bottom:var(--kfw-borderwidth) solid var(--kfw-color-line-8)}tr:not(:last-of-type){border-bottom:var(--kfw-borderwidth) solid var(--kfw-color-line-8)}tr.highlighted-col,tr.highlighted,td.highlighted-col,td.highlighted,th.highlighted-col,th.highlighted{background-color:var(--kfw-color-background-light-green)}th{text-align:start;font-weight:var(--kfw-fontweight-bold)}:where(th,td){border:0;vertical-align:top;letter-spacing:0;word-spacing:inherit;font-size:var(--kfw-fontsize);line-height:var(--kfw-lineheight);font-weight:var(--kfw-fontweight);color:var(--kfw-color-text);padding:1.2rem 1rem}table.striped tbody tr:nth-child(odd):not(.highlighted){background-color:var(--kfw-color-background-light-blue)}:where(audio,canvas,iframe,img,svg,video){vertical-align:middle}audio,video{display:inline-block}:where(iframe){border-style:none}img,video{max-width:100%;height:auto;border-style:none}figure{display:block;margin:0;padding:0}figure figcaption{padding:var(--kfw-space-xsmall)}code,kbd,samp,pre{font-family:var(--kfw-fontfamily-code);line-height:initial}pre{display:block;margin-block:0 var(--kfw-fontspace);overflow:auto;-ms-overflow-style:scrollbar}abbr[title]{text-decoration:underline dotted;cursor:help}ins{color:var(--kfw-color-state-success);text-decoration:none}del{color:var(--kfw-color-state-danger)}:where(h1,h2,h3,h4,h5,h6,.hl--1,.hl--2,.hl--3,.hl--4,.hl--5,.hl--6){font-weight:var(--kfw-fontweight-bold);line-height:var(--kfw-lineheight-heading);margin-block-start:0;color:var(--headline-color);display:block}h1,.hl--1{font-size:clamp(var(--kfw-fontsize-heading-1-min),var(--kfw-fontsize-heading-1-val),var(--kfw-fontsize-heading-1-max));margin-block-end:var(--kfw-fontspace-heading-1)}@media(min-width:1280px){h1,.hl--1{letter-spacing:var(--kfw-base-letterspacing-tight)}}h2,.hl--2{font-size:clamp(var(--kfw-fontsize-heading-2-min),var(--kfw-fontsize-heading-2-val),var(--kfw-fontsize-heading-2-max));margin-block-end:var(--kfw-fontspace-heading-2);letter-spacing:var(--kfw-base-letterspacing-tight)}h3,.hl--3{font-size:clamp(var(--kfw-fontsize-heading-3-min),var(--kfw-fontsize-heading-3-val),var(--kfw-fontsize-heading-3-max));margin-block-end:var(--kfw-fontspace-heading-3);letter-spacing:var(--kfw-base-letterspacing-tight)}@media(min-width:1280px){h3,.hl--3{letter-spacing:var(--kfw-base-letterspacing-normal)}}h4,.hl--4{font-size:clamp(var(--kfw-fontsize-heading-4-min),var(--kfw-fontsize-heading-4-val),var(--kfw-fontsize-heading-4-max));margin-block-end:var(--kfw-fontspace-heading-4)}h5,.hl--5{font-size:var(--kfw-fontsize-heading-5);margin-block-end:var(--kfw-fontspace-heading-5);line-height:var(--kfw-lineheight-heading-5);letter-spacing:var(--kfw-base-letterspacing-normal)}@media(min-width:1280px){h5,.hl--5{letter-spacing:var(--kfw-base-letterspacing-wide)}}h6,.hl--6{font-size:var(--kfw-fontsize-heading-6);margin-block-end:var(--kfw-fontspace-heading-6);letter-spacing:var(--kfw-base-letterspacing-wide);line-height:var(--kfw-lineheight)}.icon{display:inline-block;flex-shrink:0;vertical-align:top;pointer-events:none;min-width:1.6rem;min-height:1.6rem;filter:brightness(0) saturate(100%) invert(18%) sepia(6%) saturate(647%) hue-rotate(143deg) brightness(101%) contrast(96%)}.form-control{--borderhover: var(--kfw-color-fn-active);--placeholder-color: var(--kfw-color-fn);appearance:none;width:100%;height:4.3rem;font-size:var(--kfw-fontsize);font-family:inherit;line-height:var(--kfw-lineheight);color:var(--kfw-color-fn);border-radius:var(--kfw-borderradius);margin-block-start:0;border:var(--kfw-borderwidth) solid var(--kfw-base-color-gray-500);padding-inline:1.5rem;padding-block:1rem;background-color:var(--kfw-color-background)}.form-control::placeholder{color:var(--placeholder-color)}.form-control:disabled{--placeholder-color: var(--kfw-color-text);background-color:transparent;color:var(--kfw-color-text);border-color:var(--kfw-color-fn-inactive)}.form-control:hover:not(:disabled){box-shadow:0 0 0 var(--kfw-borderwidth) var(--borderhover)}:where([type=checkbox],[type=radio],select.form-control):not(:disabled){cursor:pointer}select.form-control{padding-block:0;background-position:center right 1.5rem;background-size:2.4rem auto;background-repeat:no-repeat;background-image:var(--kfw-icon-arrow-down-fn)}select.form-control:disabled{background-image:var(--kfw-icon-arrow-down)}textarea.form-control{height:auto}.form-control[aria-invalid=true]{--borderhover: var(--kfw-color-state-danger);--placeholder-color: var(--kfw-color-state-danger);border-color:var(--kfw-color-state-danger);color:var(--kfw-color-state-danger);box-shadow:0 0 0 var(--kfw-borderwidth) var(--borderhover)}:where(progress,[type=checkbox],[type=radio],[type=range]){accent-color:var(--kfw-color-fn)}[type=color]{padding-inline:.2rem;padding-block:0}textarea{display:block;resize:vertical}fieldset{margin:0;padding:0;border:0}:where([type=file],[type=range]){padding:0;border:0;width:100%}[type=file]::file-selector-button{margin-inline-end:var(--kfw-space-xsmall)}:where(.form-text,.invalid-feedback,.valid-feedback){display:block;width:100%;margin-block-start:.8rem;font-size:var(--kfw-fontsize-small);line-height:var(--kfw-lineheight);letter-spacing:var(--kfw-base-letterspacing-normal)}.valid-feedback{color:var(--kfw-color-state-success)}.valid-feedback__icon{filter:brightness(0) saturate(100%) invert(42%) sepia(29%) saturate(686%) hue-rotate(92deg) brightness(98%) contrast(93%)}.invalid-feedback{color:var(--kfw-color-state-danger)}.invalid-feedback__icon{filter:brightness(0) saturate(100%) invert(13%) sepia(90%) saturate(3362%) hue-rotate(332deg) brightness(101%) contrast(111%)}:where(label,.form-label){display:inline-block;margin-block-end:.8rem;font-weight:var(--kfw-fontweight-bold);color:var(--kfw-color-text)}.form-group{margin-block-end:var(--kfw-space-medium)}.list-group-form{--col-gap: 1.5rem;--field-size: 2.8rem;align-items:flex-start;display:flex;flex-direction:column;gap:var(--kfw-space-small) var(--kfw-space-medium)}.list-group-form>*{align-items:flex-start;display:flex;margin-bottom:0}.list-group-form label{font-weight:var(--kfw-fontweight);padding-left:var(--col-gap);width:100%;margin-block-end:0;display:flex;flex:1 1;flex-direction:column;padding-block-start:.4rem}.list-group-form :where([type=checkbox],[type=radio]){appearance:none;width:var(--field-size);height:var(--field-size);margin:0;border:var(--kfw-borderwidth) solid var(--kfw-color-fn-active);color:var(--kfw-color-fn-active);vertical-align:middle;position:relative;display:flex;align-items:center;flex-shrink:0;justify-content:center;background-color:var(--kfw-color-background)}.list-group-form :where([type=checkbox],[type=radio])[aria-invalid=true]{border-color:var(--kfw-color-state-danger);border-width:var(--kfw-borderwidth-large);color:var(--kfw-color-state-danger)}.list-group-form [type=radio]{border-radius:var(--kfw-borderradius-circle)}.list-group-form [type=checkbox]{border-radius:var(--kfw-borderradius)}.list-group-form :where([type=checkbox],[type=radio]):disabled{background-color:var(--kfw-base-color-gray-100);color:var(--kfw-color-fn-inactive);border-color:var(--kfw-color-fn-inactive)}.list-group-form :where([type=checkbox],[type=radio]):before{content:none;display:block;position:absolute;top:50%;left:50%;border-color:currentcolor;border-bottom-style:solid;border-left-style:solid}.list-group-form [type=checkbox]:before{width:1.6rem;height:.9rem;transform:translate(-50%,-50%) rotate(314deg);margin-top:-1px;border-bottom-width:.225rem;border-left-width:.225rem}.list-group-form [type=radio]:before{width:1.4rem;height:1.4rem;transform:translate(-50%,-50%);border-radius:var(--kfw-borderradius-circle);background-color:currentcolor;forced-color-adjust:none}.list-group-form :where([type=checkbox],[type=radio]):checked:before{content:""}.list-group-form :where([type=radio],[type=checkbox]):hover:not(:disabled),.list-group-form :where([type=radio],[type=checkbox]):focus:not(:disabled){border-width:var(--kfw-borderwidth-large)}.list-group-form--with-description label{font-weight:var(--kfw-fontweight-bold)}.list-group-form--with-description label>*{font-weight:var(--kfw-fontweight)}.list-group-form>*:has(input:not(:disabled)) label{cursor:pointer}.list-group-form>*:has(.list-group-form--subgroup){flex-wrap:wrap}.list-group-form--subgroup{flex-basis:100%;margin-block-start:var(--kfw-space-small);padding-left:calc(var(--field-size) + var(--col-gap))}@media(min-width:600px){.list-group-form--inline{flex-flow:row wrap}}:where([type=date],[type=time])::-webkit-calendar-picker-indicator{background:transparent;width:1.8rem;height:1.8rem}[type=date]::-webkit-calendar-picker-indicator{content:var(--kfw-icon-calendar-fn)}[type=time]::-webkit-calendar-picker-indicator{content:var(--kfw-icon-time-fn)}:where(a:not([role=button]),[role=link]){--link-color: var(--kfw-color-fn);--link-color-hover: var(--kfw-color-fn-active);color:var(--link-color);text-decoration:none;border-radius:var(--kfw-borderradius);display:inline-flex;vertical-align:top}:where(a:not([role=button]),[role=link]):where(:hover,:focus,:active){color:var(--link-color-hover);text-decoration:underline}:where(a:not([role=button]),[role=link]):has(.icon){--space-between: .5rem;justify-content:flex-start;align-items:center;gap:var(--space-between)}:where(a,[role=link],button,[type=button]) .icon{filter:brightness(0) saturate(100%) invert(16%) sepia(87%) saturate(2974%) hue-rotate(186deg) brightness(96%) contrast(101%)}:where(a,[role=link],button,[type=button]):where(:hover,:focus) .icon{filter:brightness(0) saturate(100%) invert(17%) sepia(66%) saturate(1842%) hue-rotate(178deg) brightness(97%) contrast(101%)}[type=file]::file-selector-button,:where(button,[type=submit],[type=reset],[type=button],[role=button]){--space-between: .8rem;font-family:var(--kfw-fontfamily);font-size:var(--kfw-fontsize);font-weight:var(--kfw-fontweight);border-radius:var(--kfw-borderradius);display:inline-flex;gap:var(--space-between);text-align:center;text-decoration:none;line-height:var(--kfw-lineheight);padding-block:1.2rem;padding-inline:2.5rem;justify-content:center;max-width:100%;vertical-align:middle;white-space:nowrap;cursor:pointer;align-items:center;border-width:var(--kfw-borderwidth);border-style:solid;border-color:transparent}:where([type=submit],.button--primary){--button-border-color: var(--kfw-color-fn);--button-bg: var(--kfw-color-fn);--button-color: var(--kfw-color-text-on-dark-bg);--button-border-color-hover: var(--kfw-color-fn-active);--button-bg-hover: var(--kfw-color-fn-active);--button-color-hover: var(--button-color);background-color:var(--button-bg);color:var(--button-color);border-color:var(--button-border-color)}:where([type=submit],.button--primary):where(:hover,:focus){color:var(--button-color-hover);background-color:var(--button-bg-hover);border-color:var(--button-border-color-hover);text-decoration:underline}.button--primary .icon{filter:brightness(0) saturate(100%) invert(99%) sepia(0%) saturate(0%) hue-rotate(263deg) brightness(100%) contrast(103%)}.button--secondary .icon{filter:brightness(0) saturate(100%) invert(22%) sepia(70%) saturate(1679%) hue-rotate(177deg) brightness(100%) contrast(101%)}.button--primary:where(:hover,:focus) .icon{filter:brightness(0) saturate(100%) invert(100%) sepia(99%) saturate(6%) hue-rotate(291deg) brightness(100%) contrast(104%)}.button--secondary:where(:hover,:focus) .icon{filter:brightness(0) saturate(100%) invert(99%) sepia(1%) saturate(4%) hue-rotate(26deg) brightness(101%) contrast(103%)}[type=file]::file-selector-button,:where([type=reset],.button--secondary){--button-border-color: var(--kfw-color-fn);--button-bg: transparent;--button-color: var(--kfw-color-fn);--button-border-color-hover: var(--kfw-color-fn-active);--button-bg-hover: var(--kfw-color-fn-active);--button-color-hover: var(--kfw-color-text-on-dark-bg);background-color:var(--button-bg);color:var(--button-color);border-color:var(--button-border-color)}[type=file]::file-selector-button:where(:hover,:focus),:where([type=reset],.button--secondary):where(:hover,:focus){color:var(--button-color-hover);background-color:var(--button-bg-hover);border-color:var(--button-border-color-hover);text-decoration:underline}:where(.button--primary,.button--secondary):has(.icon--left){padding-inline-start:2rem}:where(.button--primary,.button--secondary):has(.icon--right){padding-inline-end:2rem}.button--tertiary{--button-color: var(--kfw-color-fn);--button-bg: transparent;--button-color-hover: var(--kfw-color-fn-active);--space-between: .5rem;background-color:var(--button-bg);color:var(--button-color);padding:0;border:0;text-decoration:none}.button--tertiary:where(:hover,:focus){color:var(--button-color-hover);text-decoration:underline}.button--small{padding:.8rem 1.6rem;font-size:var(--kfw-fontsize-small)}input:not([type=submit],[type=button],[type=reset])[disabled],select[disabled],textarea[disabled],label[aria-disabled=true],:where(fieldset[disabled]) :where(input:not([type=submit],[type=button],[type=reset]),select,textarea){pointer-events:none}.button--full{width:100%}.searchfield{position:relative;display:flex}.searchfield__input{width:100%;padding-right:3rem}.searchfield__input::-webkit-search-cancel-button{appearance:none}.searchfield__button{position:absolute;right:1.5rem;top:50%;transform:translateY(-50%);background:none;padding:.25rem;margin:0;cursor:pointer;border-radius:1rem}.searchfield__button:where(:hover,:focus){outline:2px solid var(--kfw-color-fn-active)}.searchfield__icon{width:2.4rem;height:2.4rem;filter:brightness(0) saturate(100%) invert(17%) sepia(78%) saturate(2869%) hue-rotate(185deg) brightness(98%) contrast(100%)}.file-upload{display:grid;row-gap:var(--kfw-space-medium)}.file-upload__inner{display:flex;flex-direction:column;align-items:center;padding:var(--kfw-space-small) var(--kfw-space-small) var(--kfw-space-medium);background-color:var(--kfw-color-background-light-green)}.file-upload__title{margin-block-end:var(--kfw-space-medium);font-weight:var(--kfw-fontweight);text-align:center}.file-upload__input{display:none}.file-upload :where([type=file],[type=range]){width:auto;max-width:100%}.file-upload__icon{width:4rem;height:4rem;margin:2rem;filter:brightness(0) saturate(100%) invert(19%) sepia(77%) saturate(2383%) hue-rotate(183deg) brightness(98%) contrast(100%)}:where(.container,.container-fluid,.container-narrow,.container-extended,.container-extended-fullwidth){margin-inline:auto;width:100%}:where(.container,.container-fluid,.container-narrow,.container-extended){padding-inline:var(--kfw-safezone)}.container{max-width:var(--kfw-contentwrapper-basic)}.container-narrow{max-width:var(--kfw-contentwrapper-narrow)}.container-extended,.container-extended-fullwidth{max-width:var(--kfw-contentwrapper-extended)}[class^=container]>section{margin-block:var(--kfw-space-large) var(--kfw-space-large)}.overflow-auto{overflow:auto}}@layer variations{table.file-upload-table{border-top:0;min-height:10px;min-width:500px}table.file-upload-table :where(.file-upload-table__error,.file-upload-table__success,.file-upload-table__info){grid-column:1 / span 3}table.file-upload-table :where(.form-text,.invalid-feedback,.valid-feedback){margin-block-start:0}table.file-upload-table tr{--name: calc(100% - var(--size) - var(--action));--size: 30%;--action: 15%;display:grid;grid-template-columns:var(--name) var(--size) var(--action);width:100%;border-top:var(--kfw-borderwidth) solid var(--kfw-color-line-10)}table.file-upload-table tr:not(:last-of-type){border-bottom:0}@media(min-width:600px){table.file-upload-table tr{--size: 25%;--action: 25%}}@media(min-width:960px){table.file-upload-table tr{--action: 20%}}table.file-upload-table .file-upload-table__filename{overflow-wrap:break-word}}}@layer components{@layer base{.header{background-color:var(--kfw-color-background);border-bottom:var(--kfw-borderwidth) solid var(--kfw-color-line-11);position:sticky;top:0;z-index:1000}.header>div{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;min-height:6.4rem;gap:var(--kfw-space-medium)}.header__menu{text-align:end}.header__menu .icon{margin:1.2rem .8rem}:where(.header-logo-mobile,.header-logo-desktop img){width:auto}.header-logo-mobile{height:2.8rem}.header-logo-desktop{display:none}.header--sticky .header-logo-mobile{display:block}.header--sticky .header-logo-desktop{display:none}@media(min-width:960px){.header :where(button,a){font-size:var(--kfw-fontsize-large)}.header-logo-mobile{display:none}.header-logo-desktop{display:block;height:6rem;margin-block:3rem}}.footer{--kfw-focusring-outline-color: var(--kfw-color-background);border-top:var(--kfw-base-borderwidth-md) solid var(--kfw-color-line-11);font-size:var(--kfw-fontsize-small);line-height:var(--kfw-lineheight);padding-block:var(--kfw-space-medium) var(--kfw-space-large)}.footer>*{align-items:baseline;display:flex;flex-direction:column;gap:var(--kfw-space-medium);justify-content:space-between}@media(min-width:960px){.footer>*{gap:3.6rem;flex-direction:row}}.footer__copyright{flex-shrink:0}.footer__list{list-style:none;padding:0;margin:0;display:flex;flex-flow:row wrap;max-width:100%;gap:1.6rem var(--kfw-space-large)}.grid{display:grid;grid-template-columns:1fr;column-gap:var(--kfw-safezone);margin-block-end:var(--kfw-fontspace)}.grid [type=file]::file-selector-button,.grid :where(button,[type=submit],[type=reset],[type=button],[role=button]){white-space:normal}@media(min-width:840px){.grid{grid-template-columns:repeat(auto-fit,minmax(0,1fr));margin-block-end:0}}.hero{--hero-content-desktop-width: 42.9rem}.hero>*{position:relative}.hero__bars{display:block;width:100%}@media(min-width:600px){.hero__bars{display:none}}.hero__bars-desktop{display:none;width:var(--hero-content-desktop-width);position:absolute;top:4rem;left:4rem;bottom:4rem}@media(min-width:600px){.hero__bars-desktop{display:block}}.hero__title{width:100%;margin-block:0;align-items:center;display:flex;flex-direction:row;padding:2rem;background-color:var(--kfw-color-background-light-blue)}@media(min-width:600px){.hero__title{flex-direction:row;position:absolute;display:flex;width:var(--hero-content-desktop-width);background-color:var(--kfw-color-opaque-white-95);left:4rem;top:calc(5rem + 25px);border-radius:0 0 var(--kfw-borderradius-large) 0;padding:2rem 3rem 3rem}}.hero__image{width:100%;margin-inline:auto;display:block;object-fit:cover;height:auto;max-width:128rem}.color-palette{margin-block-end:var(--kfw-space-small)}.color-palette__color{display:block;width:100%;height:3rem;border-color:var(--kfw-color-fn-inactive);border-width:var(--kfw-borderwidth);border-style:solid}.color-palette__label{text-wrap:balance;display:block;padding:.5rem .5rem 0}.color-palette__container{text-align:center;padding-inline:1rem}}@layer variations{:where(.bg-dark,.footer){--headline-color: var(--kfw-color-text-headline-on-dark-bg);--kfw-focusring-outline-color: var(--kfw-color-background);background-color:var(--kfw-color-background-dark-blue);color:var(--kfw-color-text-on-dark-bg)}:where(.bg-dark,.footer) :where(a:not([role=button]),[role=link]){--link-color: var(--kfw-color-text-on-dark-bg);--link-color-hover: var(--kfw-color-text-on-dark-bg);text-decoration:underline}:where(.bg-dark,.footer) :where(a:not([role=button]),[role=link]):where(:hover,:focus,:active){text-decoration:none}:where(.bg-dark,.footer) :where([role=link],a:not([role=button])) .icon{filter:brightness(0) saturate(100%) invert(100%) sepia(68%) saturate(0%) hue-rotate(155deg) brightness(108%) contrast(101%)}:where(.bg-dark,.footer) :where(button,[type=submit],[type=reset],[type=button],[role=button]) .icon{filter:brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(2910%) hue-rotate(97deg) brightness(111%) contrast(100%)}:where(.bg-dark,.footer) :where(.button--primary,[type=submit]){--button-color: var(--kfw-color-fn);--button-bg: var(--kfw-color-text-on-dark-bg);--button-border-color: var(--kfw-color-text-on-dark-bg);--button-bg-hover: var(--kfw-color-text-on-dark-bg);--button-color-hover: var(--button-color);--button-border-color-hover: var(--kfw-color-text-on-dark-bg)}:where(.bg-dark,.footer) :where(.button--primary,[type=submit]) .icon{filter:brightness(0) saturate(100%) invert(16%) sepia(100%) saturate(2598%) hue-rotate(186deg) brightness(94%) contrast(100%)}:where(.bg-dark,.footer) :where(.button--secondary,[type=reset]){--button-color: var(--kfw-color-text-on-dark-bg);--button-border-color: var(--kfw-color-text-on-dark-bg);--button-bg-hover: var(--kfw-color-text-on-dark-bg);--button-color-hover: var(--kfw-color-text);--button-border-color-hover: var(--kfw-color-text-on-dark-bg)}:where(.bg-dark,.footer) :where(.button--secondary,[type=reset]) .icon{filter:brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(7500%) hue-rotate(322deg) brightness(104%) contrast(101%)}:where(.bg-dark,.footer) :where(.button--secondary,[type=reset]):where(:hover,:focus) .icon{filter:brightness(0) saturate(100%) invert(18%) sepia(5%) saturate(637%) hue-rotate(136deg) brightness(95%) contrast(95%)}:where(.bg-dark,.footer) .button--tertiary{--button-color: var(--kfw-color-text-on-dark-bg);--button-color-hover: var(--kfw-color-text-on-dark-bg)}.bg-subtle{background-color:var(--kfw-color-background-subtle)}.hl--sb{line-height:var(--kfw-lineheight-heading);letter-spacing:var(--kfw-base-letterspacing-normal);font-size:var(--kfw-fontsize-introduction)}@media(min-width:1280px){.hl--sb{font-size:var(--kfw-base-fontsize-static-5xl)}}.smk--1{line-height:var(--kfw-lineheight-heading);letter-spacing:var(--kfw-base-letterspacing-wider);font-size:var(--kfw-fontsize-small)}.tx--1{line-height:var(--kfw-lineheight);letter-spacing:var(--kfw-base-letterspacing-normal);font-size:var(--kfw-fontsize)}.tx--1-medium{line-height:var(--kfw-lineheight);letter-spacing:var(--kfw-base-letterspacing-wide);font-size:var(--kfw-fontsize)}.tx--2{line-height:var(--kfw-lineheight);letter-spacing:var(--kfw-base-letterspacing-normal);font-size:var(--kfw-fontsize-small)}.tx--4{line-height:var(--kfw-lineheight);letter-spacing:var(--kfw-base-letterspacing-normal);font-size:var(--kfw-fontsize-introduction)}}}@layer utility{.visually-hidden{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}.d-block{display:block}.m-auto{margin-inline:auto}.p-0{padding:0}.p-x{padding-inline:var(--kfw-safezone)}.p-y{padding-block:var(--kfw-safezone)}.m-x{margin-inline:var(--kfw-safezone)}.m-y{margin-block:var(--kfw-safezone)}.mb-xs{margin-block-end:var(--kfw-space-xsmall)}.mb-sm{margin-block-end:var(--kfw-space-small)}.mb-md{margin-block-end:var(--kfw-space-medium)}.mb-lg{margin-block-end:var(--kfw-space-large)}.mb-xl{margin-block-end:var(--kfw-space-big)}.t-center{text-align:center}.gutter-0{column-gap:0}}
+@layer reset,core,third-party,components,utility;@layer core.tokens,core.base,core.variations;@layer third-party.imports,third-party.overrides;@layer components.base,components.variations;@layer reset{*,*:after,*:before{box-sizing:border-box}:focus-visible{outline-offset:3px}:where(html){-webkit-text-size-adjust:none;text-size-adjust:none}:where(html){line-height:1.5}:where(html){scrollbar-gutter:stable}:where(h1){font-size:2em;margin-block:.67em}:where(abbr[title]){cursor:help;text-decoration-line:underline;text-decoration-style:dotted}@media(forced-colors:active){mark{color:HighlightText;background-color:Highlight}}:where(del,ins,s):before,:where(del,ins,s):after{clip-path:inset(100%);clip:rect(1px,1px,1px,1px);height:1px;width:1px;overflow:hidden;position:absolute;white-space:nowrap;content:"test"}:where(s):before{content:"stricken text start "}:where(s):after{content:" stricken text end"}:where(del):before{content:"deletion start "}:where(del):after{content:" deletion end"}:where(ins):before{content:"insertion start "}:where(ins):after{content:" insertion end"}:where(audio,iframe,img,svg,video){max-block-size:100%;max-inline-size:100%}:where(fieldset){min-inline-size:0}:where(label):has(+:where(textarea,input,select)){display:block}:where(textarea:not([rows])){min-block-size:6em}:where(button,input,select,textarea){font-family:inherit;font-size:inherit}:where([type=search]){-webkit-appearance:textfield}@supports (-webkit-touch-callout: none){:where([type=search]){border:1px solid -apple-system-secondary-label;background-color:canvas}}:where([type=tel],[type=url],[type=email],[type=number]):not(:placeholder-shown){direction:ltr}:where(table){border-collapse:collapse;border:1px solid}:where(th,td){border:1px solid;padding:.25em .5em}:where(dialog)::backdrop{background:#0000004d}:where(dialog),:where(dialog)::backdrop{opacity:0;transition:opacity .3s ease-out,display .3s allow-discrete,overlay .3s allow-discrete}:where(dialog[open]),:where(dialog[open])::backdrop{opacity:1}@starting-style{:where(dialog[open]),:where(dialog[open])::backdrop{opacity:0}}[hidden]:not([hidden=until-found]){display:none!important}}@layer core.tokens{[data-theme=light],:root:not([data-theme=dark]),:host(:not([data-theme=dark])){color-scheme:light}[data-theme=light],:root:not([data-theme=dark]),:host(:not([data-theme=dark])){--kfw-base-color-blue-100: #e9f5fb;--kfw-base-color-blue-400: #54b3e2;--kfw-base-color-blue-500: #007abc;--kfw-base-color-blue-600: #005a8c;--kfw-base-color-blue-700: #00446e;--kfw-base-color-blue-800: #00375b;--kfw-base-color-green-100: #ecfded;--kfw-base-color-green-300: #b7f9aa;--kfw-base-color-green-400: #94eb90;--kfw-base-color-green-700: #398357;--kfw-base-color-white-90: #ffffffe6;--kfw-base-color-white-95: #fffffff2;--kfw-base-color-white: #fff;--kfw-base-color-black: #000;--kfw-base-color-gray-50: #f6f7f8;--kfw-base-color-gray-100: #eef0f2;--kfw-base-color-gray-200: #d8dfe3;--kfw-base-color-gray-300: #a1adb5;--kfw-base-color-gray-400: #6d767d;--kfw-base-color-gray-500-10: #41484c1a;--kfw-base-color-gray-500-30: #41484c4d;--kfw-base-color-gray-500-90: #41484ce6;--kfw-base-color-gray-500: #41484c;--kfw-base-color-gray-600: #2d3134;--kfw-base-color-violet-400: #a455c5;--kfw-base-color-violet-500: #643179;--kfw-base-color-red-400: #c80538;--kfw-base-color-yellow-500: #eac80b;--kfw-base-fontfamily-sans: "KfW Centro Sans", Arial, "Helvetica Neue", Helvetica, sans-serif;--kfw-base-fontfamily-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;--kfw-base-space-static-5: .5rem;--kfw-base-space-static-10: 1rem;--kfw-base-space-static-15: 1.5rem;--kfw-base-space-static-20: 2rem;--kfw-base-space-static-25: 2.5rem;--kfw-base-space-static-30: 3rem;--kfw-base-space-static-35: 3.5rem;--kfw-base-space-static-40: 4rem;--kfw-base-space-static-50: 5rem;--kfw-base-space-static-60: 6rem;--kfw-base-space-fluid-5-min: .5rem;--kfw-base-space-fluid-5-max: 1rem;--kfw-base-space-fluid-5-val: .735vi + .588px;--kfw-base-space-fluid-10-min: 1rem;--kfw-base-space-fluid-10-max: 1.5rem;--kfw-base-space-fluid-10-val: .735vi + .5588rem;--kfw-base-space-fluid-15-min: 1.5rem;--kfw-base-space-fluid-15-max: 2rem;--kfw-base-space-fluid-15-val: .735vi + 1.0588rem;--kfw-base-space-fluid-20-min: 2rem;--kfw-base-space-fluid-20-max: 2.5rem;--kfw-base-space-fluid-20-val: .735vi + 1.5588rem;--kfw-base-space-fluid-25-min: 2.5rem;--kfw-base-space-fluid-25-max: 3rem;--kfw-base-space-fluid-25-val: .735vi + 2.0588rem;--kfw-base-space-fluid-30-min: 3rem;--kfw-base-space-fluid-30-max: 3.5rem;--kfw-base-space-fluid-30-val: .735vi + 2.5588rem;--kfw-base-space-fluid-35-min: 3.5rem;--kfw-base-space-fluid-35-max: 4rem;--kfw-base-space-fluid-35-val: .735vi + 3.0588rem;--kfw-base-space-fluid-40-min: 4rem;--kfw-base-space-fluid-40-max: 5rem;--kfw-base-space-fluid-40-val: 1.471vi + 3.1176rem;--kfw-base-space-fluid-50-min: 5rem;--kfw-base-space-fluid-50-max: 6rem;--kfw-base-space-fluid-50-val: 1.471vi + 4.1176rem;--kfw-base-fontsize-static-sm: 1.4rem;--kfw-base-fontsize-static-md: 1.6rem;--kfw-base-fontsize-static-lg: 1.8rem;--kfw-base-fontsize-static-xl: 2rem;--kfw-base-fontsize-static-2xl: 2.2rem;--kfw-base-fontsize-static-3xl: 2.4rem;--kfw-base-fontsize-static-4xl: 2.6rem;--kfw-base-fontsize-static-5xl: 2.8rem;--kfw-base-fontsize-static-6xl: 3rem;--kfw-base-fontsize-static-7xl: 3.2rem;--kfw-base-fontsize-static-8xl: 3.6rem;--kfw-base-fontsize-fluid-sm-min: 1.4rem;--kfw-base-fontsize-fluid-sm-max: 1.6rem;--kfw-base-fontsize-fluid-sm-val: .294vi + 1.2235rem;--kfw-base-fontsize-fluid-md-min: 1.6rem;--kfw-base-fontsize-fluid-md-max: 1.8rem;--kfw-base-fontsize-fluid-md-val: .294vi + 1.4235rem;--kfw-base-fontsize-fluid-lg-min: 1.8rem;--kfw-base-fontsize-fluid-lg-max: 2rem;--kfw-base-fontsize-fluid-lg-val: .294vi + 1.6235rem;--kfw-base-fontsize-fluid-xl-min: 2rem;--kfw-base-fontsize-fluid-xl-max: 2.2rem;--kfw-base-fontsize-fluid-xl-val: .294vi + 1.8235rem;--kfw-base-fontsize-fluid-2xl-min: 2.2rem;--kfw-base-fontsize-fluid-2xl-max: 2.4rem;--kfw-base-fontsize-fluid-2xl-val: .294vi + 2.0235rem;--kfw-base-fontsize-fluid-3xl-min: 2.4rem;--kfw-base-fontsize-fluid-3xl-max: 2.6rem;--kfw-base-fontsize-fluid-3xl-val: .294vi + 2.2235rem;--kfw-base-fontsize-fluid-4xl-min: 2.6rem;--kfw-base-fontsize-fluid-4xl-max: 2.8rem;--kfw-base-fontsize-fluid-4xl-val: .294vi + 2.4234999999999998rem;--kfw-base-fontsize-fluid-5xl-min: 2.8rem;--kfw-base-fontsize-fluid-5xl-max: 3.2rem;--kfw-base-fontsize-fluid-5xl-val: .588vi + 2.4471rem;--kfw-base-fontsize-fluid-6xl-min: 3rem;--kfw-base-fontsize-fluid-6xl-max: 3.6rem;--kfw-base-fontsize-fluid-6xl-val: .882vi + 2.4706rem;--kfw-base-lineheight-2xs: 1.2;--kfw-base-lineheight-xs: 1.3;--kfw-base-lineheight-sm: 1.333;--kfw-base-lineheight-md: 1.4;--kfw-base-lineheight-lg: 1.5;--kfw-base-borderradius-sm: 2px;--kfw-base-borderradius-md: .4rem;--kfw-base-borderradius-lg: 2rem;--kfw-base-borderradius-circle: 999.9rem;--kfw-base-borderwidth-md: 1px;--kfw-base-borderwidth-lg: 2px;--kfw-base-fontweight-regular: 400;--kfw-base-fontweight-medium: 500;--kfw-base-letterspacing-tight: -.5px;--kfw-base-letterspacing-normal: 0;--kfw-base-letterspacing-wide: .5px;--kfw-base-letterspacing-wider: 1px;--kfw-base-layout-breakpoint-xs: 320px;--kfw-base-layout-breakpoint-sm: 600px;--kfw-base-layout-breakpoint-md: 840px;--kfw-base-layout-breakpoint-lg: 960px;--kfw-base-layout-breakpoint-xl: 1280px;--kfw-base-layout-container-sm: 89.6rem;--kfw-base-layout-container-md: 108rem;--kfw-base-layout-container-lg: 128rem;--kfw-base-layout-safezone-static-md: 2rem;--kfw-base-layout-safezone-static-lg: 4rem;--kfw-base-layout-safezone-fluid-min: 2rem;--kfw-base-layout-safezone-fluid-max: 4rem;--kfw-base-layout-safezone-fluid-val: 2.941vi + .2353rem;--kfw-base-layout-gridcolumn-1: 1;--kfw-base-layout-gridcolumn-2: 2;--kfw-base-layout-gridcolumn-3: 3;--kfw-base-layout-gridcolumn-4: 4;--kfw-base-layout-gridcolumn-6: 6;--kfw-base-layout-gridcolumn-8: 8;--kfw-base-layout-gridcolumn-12: 12;--kfw-base-layout-gridgap-static-xs: 1.2rem;--kfw-base-layout-gridgap-static-sm: 1.8rem;--kfw-base-layout-gridgap-static-md: 2.2rem;--kfw-base-layout-gridgap-static-lg: 2.6rem;--kfw-base-layout-gridgap-static-xl: 3.6rem;--kfw-base-layout-gridgap-fluid-min: 1.2rem;--kfw-base-layout-gridgap-fluid-max: 3.6rem;--kfw-base-layout-gridgap-fluid-val: 3.529vi - .9176rem;--kfw-color-fn: #005a8c;--kfw-color-fn-active: #00446e;--kfw-color-fn-inactive: #a1adb5;--kfw-color-fn-border: #2d3134;--kfw-color-fn-label: #2d3134;--kfw-color-text: #2d3134;--kfw-color-text-on-dark-bg: #fff;--kfw-color-text-on-disabled: #fff;--kfw-color-text-headline-on-dark-bg: #b7f9aa;--kfw-color-background: #fff;--kfw-color-background-subtle: #f6f7f8;--kfw-color-background-disabled: #a1adb5;--kfw-color-background-light-blue: #e9f5fb;--kfw-color-background-light-green: #ecfded;--kfw-color-background-dark-blue: #00375b;--kfw-color-background-dark-green: #398357;--kfw-color-opaque-white-90: #ffffffe6;--kfw-color-opaque-white-95: #fffffff2;--kfw-color-opaque-gray-500-10: #41484c1a;--kfw-color-opaque-gray-500-30: #41484c4d;--kfw-color-opaque-gray-500-90: #41484ce6;--kfw-color-state-danger: #c80538;--kfw-color-state-success: #398357;--kfw-color-state-warning: #a455c5;--kfw-color-status-red: #c80538;--kfw-color-status-yellow: #eac80b;--kfw-color-status-green: #398357;--kfw-color-line-6: #00446e;--kfw-color-line-7: #2d3134;--kfw-color-line-8: #a1adb5;--kfw-color-line-9: #005a8c;--kfw-color-line-10: #2d3134;--kfw-color-line-11: #b7f9aa;--kfw-color-line-12: #a1adb5;--kfw-color-product-container: #f6f7f8;--kfw-color-product-benefit: #007abc;--kfw-color-product-credit: #398357;--kfw-color-product-cooperation: #643179;--kfw-color-product-credit-benefit: #41484c;--kfw-color-icon: #005a8c;--kfw-color-icon-secondary: #54b3e2;--kfw-color-icon-disabled: #398357;--kfw-color-icon-disabled-secondary: #94eb90;--kfw-fontfamily: "KfW Centro Sans", Arial, "Helvetica Neue", Helvetica, sans-serif;--kfw-fontfamily-code: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;--kfw-space-xsmall: 1rem;--kfw-space-small: 2rem;--kfw-space-medium: 3rem;--kfw-space-large-min: 3.5rem;--kfw-space-large-max: 4rem;--kfw-space-large-val: .735vi + 3.0588rem;--kfw-space-big-min: 5rem;--kfw-space-big-max: 6rem;--kfw-space-big-val: 1.471vi + 4.1176rem;--kfw-fontspace: 2rem;--kfw-fontspace-2xsmall: .5rem;--kfw-fontspace-xsmall: 1rem;--kfw-fontspace-small: 1.5rem;--kfw-fontspace-large: 3rem;--kfw-fontspace-heading-1: 2rem;--kfw-fontspace-heading-2: 2rem;--kfw-fontspace-heading-3: 1rem;--kfw-fontspace-heading-4: 1rem;--kfw-fontspace-heading-5: 1rem;--kfw-fontspace-heading-6: 1rem;--kfw-fontsize: 1.6rem;--kfw-fontsize-introduction: 2rem;--kfw-fontsize-large: 1.8rem;--kfw-fontsize-small: 1.4rem;--kfw-fontsize-heading-1-min: 3rem;--kfw-fontsize-heading-1-max: 3.6rem;--kfw-fontsize-heading-1-val: .882vi + 2.4706rem;--kfw-fontsize-heading-2-min: 2.8rem;--kfw-fontsize-heading-2-max: 3.2rem;--kfw-fontsize-heading-2-val: .588vi + 2.4471rem;--kfw-fontsize-heading-3-min: 2.4rem;--kfw-fontsize-heading-3-max: 2.6rem;--kfw-fontsize-heading-3-val: .294vi + 2.2235rem;--kfw-fontsize-heading-4-min: 2rem;--kfw-fontsize-heading-4-max: 2.2rem;--kfw-fontsize-heading-4-val: .294vi + 1.8235rem;--kfw-fontsize-heading-5: 1.8rem;--kfw-fontsize-heading-6: 1.6rem;--kfw-lineheight: 1.4;--kfw-lineheight-list: 1.5;--kfw-lineheight-heading: 1.3;--kfw-lineheight-heading-5: 1.333;--kfw-borderradius: .4rem;--kfw-borderradius-large: 2rem;--kfw-borderradius-small: 2px;--kfw-borderradius-circle: 999.9rem;--kfw-borderwidth: 1px;--kfw-borderwidth-large: 2px;--kfw-borderstyle: solid;--kfw-focusring-outline-width: 2px;--kfw-focusring-outline-offset: 2px;--kfw-focusring-outline-style: dashed;--kfw-fontweight: 400;--kfw-fontweight-bold: 500;--kfw-breakpoint-mobile: 600px;--kfw-breakpoint-tablet: 840px;--kfw-breakpoint-desktop: 960px;--kfw-breakpoint-desktop-large: 1280px;--kfw-contentwrapper-narrow: 89.6rem;--kfw-contentwrapper-basic: 108rem;--kfw-contentwrapper-extended: 128rem;--kfw-safezone-min: 2rem;--kfw-safezone-max: 4rem;--kfw-safezone-val: 2.941vi + .2353rem}}@layer core{@layer tokens{:root{--kfw-icon-arrow-down: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='%232d3134' viewBox='0 0 24 24'%3E%3Cpath d='m2.146 7.852.706-.706a.5.5 0 0 1 .706 0l8.448 8.238 8.436-8.238a.5.5 0 0 1 .706 0l.706.706a.5.5 0 0 1 0 .706l-9.495 9.296a.5.5 0 0 1-.706 0L2.146 8.558a.5.5 0 0 1 0-.706'/%3E%3C/svg%3E");--kfw-icon-arrow-down-fn: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='%23005a8c' viewBox='0 0 24 24'%3E%3Cpath d='m2.146 7.852.706-.706a.5.5 0 0 1 .706 0l8.448 8.238 8.436-8.238a.5.5 0 0 1 .706 0l.706.706a.5.5 0 0 1 0 .706l-9.495 9.296a.5.5 0 0 1-.706 0L2.146 8.558a.5.5 0 0 1 0-.706'/%3E%3C/svg%3E");--kfw-icon-calendar-fn: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='%23005a8c' viewBox='0 0 24 24'%3E%3Ctitle%3Eicon/kalender%3C/title%3E%3Cpath fill='%23005a8c' fill-rule='evenodd' d='M7.5 2a.5.5 0 0 1 .5.5V4h8V2.5c0-.277.223-.5.5-.5h1a.5.5 0 0 1 .5.5V4h3.5a.5.5 0 0 1 .5.5v17a.5.5 0 0 1-.5.5h-19a.5.5 0 0 1-.5-.5v-17c0-.277.223-.5.5-.5H6V2.5c0-.277.223-.5.5-.5ZM20 6H4v14h16zM7.5 16a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5Zm5 0a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5Zm5 0a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5Zm-10-4a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5Zm5 0a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5Zm5 0a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5Zm-10-4a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5Zm5 0a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5Zm5 0a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5Z'/%3E%3C/svg%3E");--kfw-icon-time-fn: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='%23005a8c' viewBox='0 0 24 24'%3E%3Ctitle%3E01_Elemente (ATOME, MOLECULES)/Icons/Funktionsicons/Positiv/spaeter_festlegen%3C/title%3E%3Cpath fill='%23005a8c' fill-rule='evenodd' d='M12 2c5.5 0 10 4.5 10 10s-4.5 10-10 10S2 17.5 2 12 6.5 2 12 2m0 2c-4.4 0-8 3.6-8 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8m.4 3c.3 0 .5.2.5.5v5.3l2.6 2.6c.2.2.2.5 0 .7l-.7.7c-.2.2-.5.2-.7 0l-3.2-3.2V7.5c0-.3.2-.5.5-.5Z'/%3E%3C/svg%3E");--kfw-safezone: clamp(var(--kfw-safezone-min), var(--kfw-safezone-val), var(--kfw-safezone-max));--kfw-space-large: clamp(var(--kfw-space-large-min), var(--kfw-space-large-val), var(--kfw-space-large-max));--kfw-space-big: clamp(var(--kfw-space-big-min), var(--kfw-space-big-val), var(--kfw-space-big-max));--headline-color: var(--kfw-color-text);--kfw-focusring-outline-color: var(--kfw-color-fn-active)}}@layer base{:root{font-size:62.5%;font-family:var(--kfw-fontfamily);background-color:var(--kfw-color-background);color:var(--kfw-color-text);line-height:var(--kfw-lineheight);font-weight:var(--kfw-fontweight);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*:focus-visible{outline:var(--kfw-focusring-outline-width) var(--kfw-focusring-outline-style) var(--kfw-focusring-outline-color);outline-offset:var(--kfw-focusring-outline-offset)}body{margin:0;font-size:1.6rem}strong,b{font-weight:var(--kfw-fontweight-bold)}small{font-size:80%}:where(sub,sup){position:relative;line-height:0;vertical-align:baseline;font-size:75%}sub{bottom:-.25em}sup{top:-.5em}:where(address,blockquote,dl,ol,p,pre,table,ul){margin-block:0 var(--kfw-fontspace)}:where(address,blockquote,dl,ol,p,pre,table,ul):last-child{margin-block-end:0}ul,ol,menu{list-style:none inside none;padding-inline-start:0}mark{padding:.125rem .25rem;vertical-align:baseline;background-color:var(--kfw-color-background-dark-blue);color:var(--kfw-color-text-on-dark-bg)}blockquote{margin-inline:0}blockquote footer{margin-block-start:var(--kfw-fontspace-2xsmall)}table{width:100%;border-collapse:collapse;border-spacing:0;border-left:0;border-right:0;text-indent:0;overflow:visible;border-top:var(--kfw-borderwidth) solid var(--kfw-color-line-10);border-bottom:var(--kfw-borderwidth-large) solid var(--kfw-color-line-7)}tr{background-color:var(--kfw-color-background)}thead tr{border-bottom:var(--kfw-borderwidth) solid var(--kfw-color-line-8)}tr:not(:last-of-type){border-bottom:var(--kfw-borderwidth) solid var(--kfw-color-line-8)}tr.highlighted-col,tr.highlighted,td.highlighted-col,td.highlighted,th.highlighted-col,th.highlighted{background-color:var(--kfw-color-background-light-green)}th{text-align:start;font-weight:var(--kfw-fontweight-bold)}:where(th,td){border:0;vertical-align:top;letter-spacing:0;word-spacing:inherit;font-size:var(--kfw-fontsize);line-height:var(--kfw-lineheight);font-weight:var(--kfw-fontweight);color:var(--kfw-color-text);padding:1.2rem 1rem}table.striped tbody tr:nth-child(odd):not(.highlighted){background-color:var(--kfw-color-background-light-blue)}:where(audio,canvas,iframe,img,svg,video){vertical-align:middle}audio,video{display:inline-block}:where(iframe){border-style:none}img,video{max-width:100%;height:auto;border-style:none}figure{display:block;margin:0;padding:0}figure figcaption{padding:var(--kfw-space-xsmall)}code,kbd,samp,pre{font-family:var(--kfw-fontfamily-code);line-height:initial}pre{display:block;margin-block:0 var(--kfw-fontspace);overflow:auto;-ms-overflow-style:scrollbar}abbr[title]{text-decoration:underline dotted;cursor:help}ins{color:var(--kfw-color-state-success);text-decoration:none}del{color:var(--kfw-color-state-danger)}:where(h1,h2,h3,h4,h5,h6,.hl--1,.hl--2,.hl--3,.hl--4,.hl--5,.hl--6){font-weight:var(--kfw-fontweight-bold);line-height:var(--kfw-lineheight-heading);margin-block-start:0;color:var(--headline-color);display:block}h1,.hl--1{font-size:clamp(var(--kfw-fontsize-heading-1-min),var(--kfw-fontsize-heading-1-val),var(--kfw-fontsize-heading-1-max));margin-block-end:var(--kfw-fontspace-heading-1)}@media(min-width:1280px){h1,.hl--1{letter-spacing:var(--kfw-base-letterspacing-tight)}}h2,.hl--2{font-size:clamp(var(--kfw-fontsize-heading-2-min),var(--kfw-fontsize-heading-2-val),var(--kfw-fontsize-heading-2-max));margin-block-end:var(--kfw-fontspace-heading-2);letter-spacing:var(--kfw-base-letterspacing-tight)}h3,.hl--3{font-size:clamp(var(--kfw-fontsize-heading-3-min),var(--kfw-fontsize-heading-3-val),var(--kfw-fontsize-heading-3-max));margin-block-end:var(--kfw-fontspace-heading-3);letter-spacing:var(--kfw-base-letterspacing-tight)}@media(min-width:1280px){h3,.hl--3{letter-spacing:var(--kfw-base-letterspacing-normal)}}h4,.hl--4{font-size:clamp(var(--kfw-fontsize-heading-4-min),var(--kfw-fontsize-heading-4-val),var(--kfw-fontsize-heading-4-max));margin-block-end:var(--kfw-fontspace-heading-4)}h5,.hl--5{font-size:var(--kfw-fontsize-heading-5);margin-block-end:var(--kfw-fontspace-heading-5);line-height:var(--kfw-lineheight-heading-5);letter-spacing:var(--kfw-base-letterspacing-normal)}@media(min-width:1280px){h5,.hl--5{letter-spacing:var(--kfw-base-letterspacing-wide)}}h6,.hl--6{font-size:var(--kfw-fontsize-heading-6);margin-block-end:var(--kfw-fontspace-heading-6);letter-spacing:var(--kfw-base-letterspacing-wide);line-height:var(--kfw-lineheight)}.icon{display:inline-block;flex-shrink:0;vertical-align:top;pointer-events:none;min-width:1.6rem;min-height:1.6rem;filter:brightness(0) saturate(100%) invert(18%) sepia(9%) saturate(392%) hue-rotate(162deg) brightness(97%) contrast(96%)}.form-control{--borderhover: var(--kfw-color-fn-active);--placeholder-color: var(--kfw-color-fn);appearance:none;width:100%;height:4.3rem;font-size:var(--kfw-fontsize);font-family:inherit;line-height:var(--kfw-lineheight);color:var(--kfw-color-fn);border-radius:var(--kfw-borderradius);margin-block-start:0;border:var(--kfw-borderwidth) solid var(--kfw-base-color-gray-500);padding-inline:1.5rem;padding-block:1rem;background-color:var(--kfw-color-background)}.form-control::placeholder{color:var(--placeholder-color)}.form-control:disabled{--placeholder-color: var(--kfw-color-text);background-color:transparent;color:var(--kfw-color-text);border-color:var(--kfw-color-fn-inactive)}.form-control:hover:not(:disabled){box-shadow:0 0 0 var(--kfw-borderwidth) var(--borderhover)}:where([type=checkbox],[type=radio],select.form-control):not(:disabled){cursor:pointer}select.form-control{padding-block:0;background-position:center right 1.5rem;background-size:2.4rem auto;background-repeat:no-repeat;background-image:var(--kfw-icon-arrow-down-fn)}select.form-control:disabled{background-image:var(--kfw-icon-arrow-down)}textarea.form-control{height:auto}.form-control[aria-invalid=true]{--borderhover: var(--kfw-color-state-danger);--placeholder-color: var(--kfw-color-state-danger);border-color:var(--kfw-color-state-danger);color:var(--kfw-color-state-danger);box-shadow:0 0 0 var(--kfw-borderwidth) var(--borderhover)}:where(progress,[type=checkbox],[type=radio],[type=range]){accent-color:var(--kfw-color-fn)}[type=color]{padding-inline:.2rem;padding-block:0}textarea{display:block;resize:vertical}fieldset{margin:0;padding:0;border:0}:where([type=file],[type=range]){padding:0;border:0;width:100%}[type=file]::file-selector-button{margin-inline-end:var(--kfw-space-xsmall)}:where(.form-text,.invalid-feedback,.valid-feedback){display:block;width:100%;margin-block-start:.8rem;font-size:var(--kfw-fontsize-small);line-height:var(--kfw-lineheight);letter-spacing:var(--kfw-base-letterspacing-normal)}.valid-feedback{color:var(--kfw-color-state-success)}.valid-feedback__icon{filter:brightness(0) saturate(100%) invert(45%) sepia(22%) saturate(903%) hue-rotate(92deg) brightness(93%) contrast(91%)}.invalid-feedback{color:var(--kfw-color-state-danger)}.invalid-feedback__icon{filter:brightness(0) saturate(100%) invert(12%) sepia(83%) saturate(4018%) hue-rotate(334deg) brightness(104%) contrast(109%)}:where(label,.form-label){display:inline-block;margin-block-end:.8rem;font-weight:var(--kfw-fontweight-bold);color:var(--kfw-color-text)}.form-group{margin-block-end:var(--kfw-space-medium)}.list-group-form{--col-gap: 1.5rem;--field-size: 2.8rem;align-items:flex-start;display:flex;flex-direction:column;gap:var(--kfw-space-small) var(--kfw-space-medium)}.list-group-form>*{align-items:flex-start;display:flex;margin-bottom:0}.list-group-form label{font-weight:var(--kfw-fontweight);padding-left:var(--col-gap);width:100%;margin-block-end:0;display:flex;flex:1 1;flex-direction:column;padding-block-start:.4rem}.list-group-form :where([type=checkbox],[type=radio]){appearance:none;width:var(--field-size);height:var(--field-size);margin:0;border:var(--kfw-borderwidth) solid var(--kfw-color-fn-active);color:var(--kfw-color-fn-active);vertical-align:middle;position:relative;display:flex;align-items:center;flex-shrink:0;justify-content:center;background-color:var(--kfw-color-background)}.list-group-form :where([type=checkbox],[type=radio])[aria-invalid=true]{border-color:var(--kfw-color-state-danger);border-width:var(--kfw-borderwidth-large);color:var(--kfw-color-state-danger)}.list-group-form [type=radio]{border-radius:var(--kfw-borderradius-circle)}.list-group-form [type=checkbox]{border-radius:var(--kfw-borderradius)}.list-group-form :where([type=checkbox],[type=radio]):disabled{background-color:var(--kfw-base-color-gray-100);color:var(--kfw-color-fn-inactive);border-color:var(--kfw-color-fn-inactive)}.list-group-form :where([type=checkbox],[type=radio]):before{content:none;display:block;position:absolute;top:50%;left:50%;border-color:currentcolor;border-bottom-style:solid;border-left-style:solid}.list-group-form [type=checkbox]:before{width:1.6rem;height:.9rem;transform:translate(-50%,-50%) rotate(314deg);margin-top:-1px;border-bottom-width:.225rem;border-left-width:.225rem}.list-group-form [type=radio]:before{width:1.4rem;height:1.4rem;transform:translate(-50%,-50%);border-radius:var(--kfw-borderradius-circle);background-color:currentcolor;forced-color-adjust:none}.list-group-form :where([type=checkbox],[type=radio]):checked:before{content:""}.list-group-form :where([type=radio],[type=checkbox]):hover:not(:disabled),.list-group-form :where([type=radio],[type=checkbox]):focus:not(:disabled){border-width:var(--kfw-borderwidth-large)}.list-group-form--with-description label{font-weight:var(--kfw-fontweight-bold)}.list-group-form--with-description label>*{font-weight:var(--kfw-fontweight)}.list-group-form>*:has(input:not(:disabled)) label{cursor:pointer}.list-group-form>*:has(.list-group-form--subgroup){flex-wrap:wrap}.list-group-form--subgroup{flex-basis:100%;margin-block-start:var(--kfw-space-small);padding-left:calc(var(--field-size) + var(--col-gap))}@media(min-width:600px){.list-group-form--inline{flex-flow:row wrap}}:where([type=date],[type=time])::-webkit-calendar-picker-indicator{background:transparent;width:1.8rem;height:1.8rem}[type=date]::-webkit-calendar-picker-indicator{content:var(--kfw-icon-calendar-fn)}[type=time]::-webkit-calendar-picker-indicator{content:var(--kfw-icon-time-fn)}:where(a:not([role=button]),[role=link]){--link-color: var(--kfw-color-fn);--link-color-hover: var(--kfw-color-fn-active);color:var(--link-color);text-decoration:none;border-radius:var(--kfw-borderradius);display:inline-flex;vertical-align:top}:where(a:not([role=button]),[role=link]):where(:hover,:focus,:active){color:var(--link-color-hover);text-decoration:underline}:where(a:not([role=button]),[role=link]):has(.icon){--space-between: .5rem;justify-content:flex-start;align-items:center;gap:var(--space-between)}:where(a,[role=link],button,[type=button]) .icon{filter:brightness(0) saturate(100%) invert(21%) sepia(92%) saturate(1744%) hue-rotate(181deg) brightness(91%) contrast(100%)}:where(a,[role=link],button,[type=button]):where(:hover,:focus) .icon{filter:brightness(0) saturate(100%) invert(21%) sepia(12%) saturate(6597%) hue-rotate(173deg) brightness(100%) contrast(103%)}[type=file]::file-selector-button,:where(button,[type=submit],[type=reset],[type=button],[role=button]){--space-between: .8rem;font-family:var(--kfw-fontfamily);font-size:var(--kfw-fontsize);font-weight:var(--kfw-fontweight);border-radius:var(--kfw-borderradius);display:inline-flex;gap:var(--space-between);text-align:center;text-decoration:none;line-height:var(--kfw-lineheight);padding-block:1.2rem;padding-inline:2.5rem;justify-content:center;max-width:100%;vertical-align:middle;white-space:nowrap;cursor:pointer;align-items:center;border-width:var(--kfw-borderwidth);border-style:solid;border-color:transparent}:where([type=submit],.button--primary){--button-border-color: var(--kfw-color-fn);--button-bg: var(--kfw-color-fn);--button-color: var(--kfw-color-text-on-dark-bg);--button-border-color-hover: var(--kfw-color-fn-active);--button-bg-hover: var(--kfw-color-fn-active);--button-color-hover: var(--button-color);background-color:var(--button-bg);color:var(--button-color);border-color:var(--button-border-color)}:where([type=submit],.button--primary):where(:hover,:focus){color:var(--button-color-hover);background-color:var(--button-bg-hover);border-color:var(--button-border-color-hover);text-decoration:underline}.button--primary .icon{filter:brightness(0) saturate(100%) invert(99%) sepia(0%) saturate(5%) hue-rotate(46deg) brightness(101%) contrast(101%)}.button--secondary .icon{filter:brightness(0) saturate(100%) invert(13%) sepia(72%) saturate(5544%) hue-rotate(190deg) brightness(96%) contrast(100%)}.button--primary:where(:hover,:focus) .icon{filter:brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(0%) hue-rotate(273deg) brightness(103%) contrast(103%)}.button--secondary:where(:hover,:focus) .icon{filter:brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(5%) hue-rotate(253deg) brightness(103%) contrast(101%)}[type=file]::file-selector-button,:where([type=reset],.button--secondary){--button-border-color: var(--kfw-color-fn);--button-bg: transparent;--button-color: var(--kfw-color-fn);--button-border-color-hover: var(--kfw-color-fn-active);--button-bg-hover: var(--kfw-color-fn-active);--button-color-hover: var(--kfw-color-text-on-dark-bg);background-color:var(--button-bg);color:var(--button-color);border-color:var(--button-border-color)}[type=file]::file-selector-button:where(:hover,:focus),:where([type=reset],.button--secondary):where(:hover,:focus){color:var(--button-color-hover);background-color:var(--button-bg-hover);border-color:var(--button-border-color-hover);text-decoration:underline}:where(.button--primary,.button--secondary):has(.icon--left){padding-inline-start:2rem}:where(.button--primary,.button--secondary):has(.icon--right){padding-inline-end:2rem}.button--tertiary{--button-color: var(--kfw-color-fn);--button-bg: transparent;--button-color-hover: var(--kfw-color-fn-active);--space-between: .5rem;background-color:var(--button-bg);color:var(--button-color);padding:0;border:0;text-decoration:none}.button--tertiary:where(:hover,:focus){color:var(--button-color-hover);text-decoration:underline}.button--small{padding:.8rem 1.6rem;font-size:var(--kfw-fontsize-small)}input:not([type=submit],[type=button],[type=reset])[disabled],select[disabled],textarea[disabled],label[aria-disabled=true],:where(fieldset[disabled]) :where(input:not([type=submit],[type=button],[type=reset]),select,textarea){pointer-events:none}.button--full{width:100%}.searchfield{position:relative;display:flex}.searchfield__input{width:100%;padding-right:3rem}.searchfield__input::-webkit-search-cancel-button{appearance:none}.searchfield__button{position:absolute;right:1.5rem;top:50%;transform:translateY(-50%);background:none;padding:.25rem;margin:0;cursor:pointer;border-radius:var(--kfw-borderradius)}.searchfield__button:where(:hover,:focus){outline:2px solid var(--kfw-color-fn-active)}.searchfield__icon{width:2.4rem;height:2.4rem;filter:brightness(0) saturate(100%) invert(21%) sepia(97%) saturate(1245%) hue-rotate(177deg) brightness(101%) contrast(100%)}.file-upload{display:grid;row-gap:var(--kfw-space-medium)}.file-upload__inner{display:flex;flex-direction:column;align-items:center;padding:var(--kfw-space-small) var(--kfw-space-small) var(--kfw-space-medium);background-color:var(--kfw-color-background-light-green)}.file-upload__title{margin-block-end:var(--kfw-space-medium);font-weight:var(--kfw-fontweight);text-align:center}.file-upload__input{display:none}.file-upload :where([type=file],[type=range]){width:auto;max-width:100%}.file-upload__icon{width:4rem;height:4rem;margin:2rem;filter:brightness(0) saturate(100%) invert(24%) sepia(99%) saturate(862%) hue-rotate(170deg) brightness(97%) contrast(103%)}:where(.container,.container-fluid,.container-narrow,.container-extended,.container-extended-fullwidth){margin-inline:auto;width:100%}:where(.container,.container-fluid,.container-narrow,.container-extended){padding-inline:var(--kfw-safezone)}.container{max-width:var(--kfw-contentwrapper-basic)}.container-narrow{max-width:var(--kfw-contentwrapper-narrow)}.container-extended,.container-extended-fullwidth{max-width:var(--kfw-contentwrapper-extended)}[class^=container]>section{margin-block:var(--kfw-space-large) var(--kfw-space-large)}.overflow-auto{overflow:auto}}@layer variations{table.file-upload-table{border-top:0;min-height:1rem;min-width:50rem}table.file-upload-table :where(.file-upload-table__error,.file-upload-table__success,.file-upload-table__info){grid-column:1 / span 3}table.file-upload-table :where(.form-text,.invalid-feedback,.valid-feedback){margin-block-start:0}table.file-upload-table tr{--name: calc(100% - var(--size) - var(--action));--size: 30%;--action: 15%;display:grid;grid-template-columns:var(--name) var(--size) var(--action);width:100%;border-top:var(--kfw-borderwidth) solid var(--kfw-color-line-10)}table.file-upload-table tr:not(:last-of-type){border-bottom:0}@media(min-width:600px){table.file-upload-table tr{--size: 25%;--action: 25%}}@media(min-width:960px){table.file-upload-table tr{--action: 20%}}table.file-upload-table .file-upload-table__filename{overflow-wrap:break-word}}}@layer components{@layer base{.header{background-color:var(--kfw-color-background);border-bottom:var(--kfw-borderwidth) solid var(--kfw-color-line-11);position:sticky;top:0;z-index:1000}.header>div{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;min-height:6.4rem;gap:var(--kfw-space-medium)}.header__menu{text-align:end}.header__menu .icon{margin:1.2rem .8rem}:where(.header-logo-mobile,.header-logo-desktop img){width:auto}.header-logo-mobile{height:2.8rem}.header-logo-desktop{display:none}.header--sticky .header-logo-mobile{display:block}.header--sticky .header-logo-desktop{display:none}@media(min-width:960px){.header :where(button,a){font-size:var(--kfw-fontsize-large)}.header-logo-mobile{display:none}.header-logo-desktop{display:block;height:6rem;margin-block:3rem}}.footer{--kfw-focusring-outline-color: var(--kfw-color-background);border-top:var(--kfw-base-borderwidth-md) solid var(--kfw-color-line-11);font-size:var(--kfw-fontsize-small);line-height:var(--kfw-lineheight);padding-block:var(--kfw-space-medium) var(--kfw-space-large)}.footer>*{align-items:baseline;display:flex;flex-direction:column;gap:var(--kfw-space-medium);justify-content:space-between}@media(min-width:960px){.footer>*{gap:3.6rem;flex-direction:row}}.footer__copyright{flex-shrink:0}.footer__list{list-style:none;padding:0;margin:0;display:flex;flex-flow:row wrap;max-width:100%;gap:1.6rem var(--kfw-space-large)}.grid{display:grid;grid-template-columns:1fr;column-gap:var(--kfw-safezone);margin-block-end:var(--kfw-fontspace)}@media(min-width:840px){.grid{grid-template-columns:repeat(auto-fit,minmax(0,1fr));margin-block-end:0}}.hero{--hero-content-desktop-width: 42.9rem}.hero>*{position:relative}.hero__bars{display:block;width:100%}@media(min-width:600px){.hero__bars{display:none}}.hero__bars-desktop{display:none;width:var(--hero-content-desktop-width);position:absolute;top:4rem;left:4rem;bottom:4rem}@media(min-width:600px){.hero__bars-desktop{display:block}}.hero__title{width:100%;margin-block:0;align-items:center;display:flex;flex-direction:row;padding:2rem;background-color:var(--kfw-color-background-light-blue)}@media(min-width:600px){.hero__title{flex-direction:row;position:absolute;display:flex;width:var(--hero-content-desktop-width);background-color:var(--kfw-color-opaque-white-95);left:4rem;top:calc(5rem + 25px);border-radius:0 0 var(--kfw-borderradius-large) 0;padding:2rem 3rem 3rem}}.hero__image{width:100%;margin-inline:auto;display:block;object-fit:cover;height:auto;max-width:128rem}.color-palette{display:grid;grid-template-columns:1fr}@media(min-width:840px){.color-palette{grid-template-columns:repeat(auto-fit,minmax(0,1fr))}}.color-palette [type=file]::file-selector-button,.color-palette :where(button,[type=submit],[type=reset],[type=button],[role=button]){white-space:normal}.color-palette__item{margin-block-end:var(--kfw-space-small)}.color-palette__color{display:block;width:100%;height:3rem;border:var(--kfw-borderwidth) solid transparent;border-inline-width:0;border-block-color:var(--kfw-color-fn-inactive);border-inline-start:var(--kfw-borderwidth) solid var(--kfw-color-fn-inactive);border-inline-end:var(--kfw-borderwidth) solid var(--kfw-color-fn-inactive)}@media(min-width:840px){.color-palette__color{border-inline-start:0;border-inline-end:0}.color-palette__item:first-child .color-palette__color{border-inline-start:var(--kfw-borderwidth) solid var(--kfw-color-fn-inactive)}.color-palette__item:last-child .color-palette__color{border-inline-end:var(--kfw-borderwidth) solid var(--kfw-color-fn-inactive)}}.color-palette__label{text-wrap:balance;display:block;padding:.5rem;margin-block-end:0}.color-palette__container{text-align:center;padding-inline:var(--kfw-space-xsmall)}}@layer variations{:where(.bg-dark,.footer){--headline-color: var(--kfw-color-text-headline-on-dark-bg);--kfw-focusring-outline-color: var(--kfw-color-background);background-color:var(--kfw-color-background-dark-blue);color:var(--kfw-color-text-on-dark-bg)}:where(.bg-dark,.footer) :where(a:not([role=button]),[role=link]){--link-color: var(--kfw-color-text-on-dark-bg);--link-color-hover: var(--kfw-color-text-on-dark-bg);text-decoration:underline}:where(.bg-dark,.footer) :where(a:not([role=button]),[role=link]):where(:hover,:focus,:active){text-decoration:none}:where(.bg-dark,.footer) :where([role=link],a:not([role=button])) .icon{filter:brightness(0) saturate(100%) invert(100%) sepia(16%) saturate(0%) hue-rotate(293deg) brightness(103%) contrast(102%)}:where(.bg-dark,.footer) :where(button,[type=submit],[type=reset],[type=button],[role=button]) .icon{filter:brightness(0) saturate(100%) invert(100%) sepia(35%) saturate(881%) hue-rotate(194deg) brightness(106%) contrast(102%)}:where(.bg-dark,.footer) :where(.button--primary,[type=submit]){--button-color: var(--kfw-color-fn);--button-bg: var(--kfw-color-text-on-dark-bg);--button-border-color: var(--kfw-color-text-on-dark-bg);--button-bg-hover: var(--kfw-color-text-on-dark-bg);--button-color-hover: var(--button-color);--button-border-color-hover: var(--kfw-color-text-on-dark-bg)}:where(.bg-dark,.footer) :where(.button--primary,[type=submit]) .icon{filter:brightness(0) saturate(100%) invert(22%) sepia(99%) saturate(1255%) hue-rotate(177deg) brightness(96%) contrast(101%)}:where(.bg-dark,.footer) :where(.button--secondary,[type=reset]){--button-color: var(--kfw-color-text-on-dark-bg);--button-border-color: var(--kfw-color-text-on-dark-bg);--button-bg-hover: var(--kfw-color-text-on-dark-bg);--button-color-hover: var(--kfw-color-text);--button-border-color-hover: var(--kfw-color-text-on-dark-bg)}:where(.bg-dark,.footer) :where(.button--secondary,[type=reset]) .icon{filter:brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(0%) hue-rotate(97deg) brightness(102%) contrast(102%)}:where(.bg-dark,.footer) :where(.button--secondary,[type=reset]):where(:hover,:focus) .icon{filter:brightness(0) saturate(100%) invert(15%) sepia(2%) saturate(2947%) hue-rotate(202deg) brightness(100%) contrast(89%)}:where(.bg-dark,.footer) .button--tertiary{--button-color: var(--kfw-color-text-on-dark-bg);--button-color-hover: var(--kfw-color-text-on-dark-bg)}.bg-subtle{background-color:var(--kfw-color-background-subtle)}.hl--sb{line-height:var(--kfw-lineheight-heading);letter-spacing:var(--kfw-base-letterspacing-normal);font-size:var(--kfw-fontsize-introduction)}@media(min-width:1280px){.hl--sb{font-size:var(--kfw-base-fontsize-static-5xl)}}.smk--1{line-height:var(--kfw-lineheight-heading);letter-spacing:var(--kfw-base-letterspacing-wider);font-size:var(--kfw-fontsize-small)}.tx--1{line-height:var(--kfw-lineheight);letter-spacing:var(--kfw-base-letterspacing-normal);font-size:var(--kfw-fontsize)}.tx--1-medium{line-height:var(--kfw-lineheight);letter-spacing:var(--kfw-base-letterspacing-wide);font-size:var(--kfw-fontsize)}.tx--2{line-height:var(--kfw-lineheight);letter-spacing:var(--kfw-base-letterspacing-normal);font-size:var(--kfw-fontsize-small)}.tx--4{line-height:var(--kfw-lineheight);letter-spacing:var(--kfw-base-letterspacing-normal);font-size:var(--kfw-fontsize-introduction)}}}@layer utility{.visually-hidden{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}.d-block{display:block}.m-auto{margin-inline:auto}.p-0{padding:0}.p-sm{padding:var(--kfw-space-small)}.p-x{padding-inline:var(--kfw-safezone)}.p-y{padding-block:var(--kfw-safezone)}.m-x{margin-inline:var(--kfw-safezone)}.m-y{margin-block:var(--kfw-safezone)}.mb-xs{margin-block-end:var(--kfw-space-xsmall)}.mb-sm{margin-block-end:var(--kfw-space-small)}.mb-md{margin-block-end:var(--kfw-space-medium)}.mb-lg{margin-block-end:var(--kfw-space-large)}.mb-xl{margin-block-end:var(--kfw-space-big)}.t-center{text-align:center}}

package/demo/scripts/postcss.color-to-filter.js

@@ -1,5 +1,7 @@
 import CssFilterConverter from "css-filter-converter"
 
+const ROOT_SELECTOR = ":root:not([data-theme=dark])"
+
 export default function postcssColorToFilterPlugin() {
   return {
     postcssPlugin: "postcss-color-to-filter",
@@ -8,7 +10,7 @@ export default function postcssColorToFilterPlugin() {
 
       // CSS-Variablen aus :root sammeln
       root.walkRules((rule) => {
-        if (rule.selector === ":root" || rule.selector.startsWith(":root,")) {
+        if (rule.selector.includes(ROOT_SELECTOR)) {
           rule.walkDecls((decl) => {
             if (decl.prop.startsWith("--")) {
               cssVariables[decl.prop] = decl.value.trim()

package/demo/scripts/postcss.svg-load-plugin.js

@@ -3,6 +3,8 @@ import path from "path"
 
 const svgCache = {}
 
+const ROOT_SELECTOR = ":root:not([data-theme=dark])"
+
 export default function postcssSvgLoadPlugin(options = {}) {
   return {
     postcssPlugin: "postcss-svg-load",
@@ -12,7 +14,7 @@ export default function postcssSvgLoadPlugin(options = {}) {
       const cssVariables = {}
 
       root.walkRules((rule) => {
-        if (rule.selector === ":root" || rule.selector.startsWith(":root,")) {
+        if (rule.selector.includes(ROOT_SELECTOR)) {
           rule.walkDecls((decl) => {
             if (decl.prop.startsWith("--")) {
               cssVariables[decl.prop] = decl.value.trim()

package/demo/src/style.css

@@ -772,7 +772,7 @@
       padding: 0.25rem;
       margin: 0;
       cursor: pointer;
-      border-radius: 1rem;
+      border-radius: var(--kfw-borderradius); /* @todo check 1rem? */
     }
 
     .searchfield__button:where(:hover, :focus) {
@@ -866,8 +866,8 @@
   @layer variations {
     table.file-upload-table {
       border-top: 0;
-      min-height: 10px;
-      min-width: 500px;
+      min-height: 1rem;
+      min-width: 50rem;
     }
 
     table.file-upload-table :where(.file-upload-table__error, .file-upload-table__success, .file-upload-table__info) {
@@ -1019,11 +1019,6 @@
       margin-block-end: var(--kfw-fontspace);
     }
 
-    .grid [type="file"]::file-selector-button,
-    .grid :where(button, [type="submit"], [type="reset"], [type="button"], [role="button"]) {
-      white-space: normal;
-    }
-
     @media (--kfw-breakpoint-tablet) {
       .grid {
         grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
@@ -1099,6 +1094,22 @@
     }
 
     .color-palette {
+      display: grid;
+      grid-template-columns: 1fr;
+    }
+
+    @media (--kfw-breakpoint-tablet) {
+      .color-palette {
+        grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
+      }
+    }
+
+    .color-palette [type="file"]::file-selector-button,
+    .color-palette :where(button, [type="submit"], [type="reset"], [type="button"], [role="button"]) {
+      white-space: normal;
+    }
+
+    .color-palette__item {
       margin-block-end: var(--kfw-space-small);
     }
 
@@ -1106,20 +1117,38 @@
       display: block;
       width: 100%;
       height: 3rem;
-      border-color: var(--kfw-color-fn-inactive);
-      border-width: var(--kfw-borderwidth);
-      border-style: solid; /* @todo add border-style token here later */
+      border: var(--kfw-borderwidth) solid transparent;
+      border-inline-width: 0;
+      border-block-color: var(--kfw-color-fn-inactive);
+      border-inline-start: var(--kfw-borderwidth) solid var(--kfw-color-fn-inactive);
+      border-inline-end: var(--kfw-borderwidth) solid var(--kfw-color-fn-inactive);
+    }
+
+    @media (--kfw-breakpoint-tablet) {
+      .color-palette__color {
+        border-inline-start: 0;
+        border-inline-end: 0;
+      }
+
+      .color-palette__item:first-child .color-palette__color {
+        border-inline-start: var(--kfw-borderwidth) solid var(--kfw-color-fn-inactive);
+      }
+
+      .color-palette__item:last-child .color-palette__color {
+        border-inline-end: var(--kfw-borderwidth) solid var(--kfw-color-fn-inactive);
+      }
     }
 
     .color-palette__label {
       text-wrap: balance;
       display: block;
-      padding: 0.5rem 0.5rem 0;
+      padding: 0.5rem;
+      margin-block-end: 0;
     }
 
     .color-palette__container {
       text-align: center;
-      padding-inline: 1rem;
+      padding-inline: var(--kfw-space-xsmall);
     }
   }
 
@@ -1257,6 +1286,10 @@
     padding: 0;
   }
 
+  .p-sm {
+    padding: var(--kfw-space-small);
+  }
+
   .p-x {
     padding-inline: var(--kfw-safezone);
   }
@@ -1296,8 +1329,4 @@
   .t-center {
     text-align: center;
   }
-
-  .gutter-0 {
-    column-gap: 0;
-  }
 }

package/output/css/kfw-design-tokens.light.css

@@ -1,10 +1,10 @@
 /**
- * KfW Design Tokens v0.5.7 | MPL-2.0 | https://github.com/openkfw/design-tokens
+ * KfW Design Tokens v0.5.9 | MPL-2.0 | https://github.com/openkfw/design-tokens
  */
 
-:root, :host, .kfw-theme--light { color-scheme: light; }
+[data-theme=light], :root:not([data-theme=dark]), :host(:not([data-theme=dark])) { color-scheme: light; }
 
-:root, :host, .kfw-theme--light {
+[data-theme=light], :root:not([data-theme=dark]), :host(:not([data-theme=dark])) {
   --kfw-base-color-blue-100: #e9f5fb;
   --kfw-base-color-blue-400: #54b3e2;
   --kfw-base-color-blue-500: #007abc;
@@ -17,8 +17,8 @@
   --kfw-base-color-green-700: #398357;
   --kfw-base-color-white-90: #ffffffe6;
   --kfw-base-color-white-95: #fffffff2;
-  --kfw-base-color-white: #ffffff;
-  --kfw-base-color-black: #000000;
+  --kfw-base-color-white: #fff;
+  --kfw-base-color-black: #000;
   --kfw-base-color-gray-50: #f6f7f8;
   --kfw-base-color-gray-100: #eef0f2;
   --kfw-base-color-gray-200: #d8dfe3;
@@ -161,10 +161,10 @@
   --kfw-color-fn-border: #2d3134; /** Interaction border color (Gray 600) */
   --kfw-color-fn-label: #2d3134; /** Interaction label color (Gray 600) */
   --kfw-color-text: #2d3134; /** Main text color for body (Gray 600) */
-  --kfw-color-text-on-dark-bg: #ffffff; /** Main text color on dark background (White) */
-  --kfw-color-text-on-disabled: #ffffff; /** Main text color on disabled (White) */
+  --kfw-color-text-on-dark-bg: #fff; /** Main text color on dark background (White) */
+  --kfw-color-text-on-disabled: #fff; /** Main text color on disabled (White) */
   --kfw-color-text-headline-on-dark-bg: #b7f9aa; /** Headline text color on dark background (Green 300) */
-  --kfw-color-background: #ffffff; /** Main background color for body (White) */
+  --kfw-color-background: #fff; /** Main background color for body (White) */
   --kfw-color-background-subtle: #f6f7f8; /** Neutral (Gray 50) */
   --kfw-color-background-disabled: #a1adb5; /** Disabled (Gray 300) */
   --kfw-color-background-light-blue: #e9f5fb; /** Light blue (Blue 100) */

package/output/figma/kfw-design-tokens.light.json

@@ -55,12 +55,12 @@
           "$type": "color"
         },
         "Default": {
-          "$value": "#ffffff",
+          "$value": "#fff",
           "$type": "color"
         }
       },
       "Black": {
-        "$value": "#000000",
+        "$value": "#000",
         "$type": "color"
       },
       "Gray": {
@@ -337,11 +337,11 @@
           "$type": "color"
         },
         "On-dark-bg": {
-          "$value": "#ffffff",
+          "$value": "#fff",
           "$type": "color"
         },
         "On-disabled": {
-          "$value": "#ffffff",
+          "$value": "#fff",
           "$type": "color"
         },
         "Headline-on-dark-bg": {
@@ -351,7 +351,7 @@
       },
       "Background": {
         "Default": {
-          "$value": "#ffffff",
+          "$value": "#fff",
           "$type": "color"
         },
         "Subtle": {

package/output/js/kfw-design-tokens.d.ts

@@ -1,5 +1,5 @@
 /**
- * KfW Design Tokens v0.5.7 | MPL-2.0 | https://github.com/openkfw/design-tokens
+ * KfW Design Tokens v0.5.9 | MPL-2.0 | https://github.com/openkfw/design-tokens
  */
 
 export const KfwBaseColorBlue100: {

package/output/js/kfw-design-tokens.light.js

@@ -1,5 +1,5 @@
 /**
- * KfW Design Tokens v0.5.7 | MPL-2.0 | https://github.com/openkfw/design-tokens
+ * KfW Design Tokens v0.5.9 | MPL-2.0 | https://github.com/openkfw/design-tokens
  */
 
 export const KfwBaseColorBlue100 = {
@@ -101,25 +101,25 @@ export const KfwBaseColorGray400 = {
 };
 export const KfwBaseColorGray50010 = {
   colorSpace: "srgb",
-  components: [0.2549, 0.2784, 0.298],
+  components: [0.2549, 0.2824, 0.298],
   hex: "#41484c",
   alpha: 0.1,
 };
 export const KfwBaseColorGray50030 = {
   colorSpace: "srgb",
-  components: [0.2549, 0.2784, 0.298],
+  components: [0.2549, 0.2824, 0.298],
   hex: "#41484c",
   alpha: 0.3,
 };
 export const KfwBaseColorGray50090 = {
   colorSpace: "srgb",
-  components: [0.2549, 0.2784, 0.298],
+  components: [0.2549, 0.2824, 0.298],
   hex: "#41484c",
   alpha: 0.9,
 };
 export const KfwBaseColorGray500 = {
   colorSpace: "srgb",
-  components: [0.2549, 0.2784, 0.298],
+  components: [0.2549, 0.2824, 0.298],
   hex: "#41484c",
 };
 export const KfwBaseColorGray600 = {
@@ -139,7 +139,7 @@ export const KfwBaseColorViolet500 = {
 };
 export const KfwBaseColorRed400 = {
   colorSpace: "srgb",
-  components: [0.7843, 0.0196, 0.2157],
+  components: [0.7843, 0.0196, 0.2196],
   hex: "#c80538",
 };
 export const KfwBaseColorYellow500 = {
@@ -163,31 +163,31 @@ export const KfwBaseSpaceStatic50 = "5rem";
 export const KfwBaseSpaceStatic60 = "6rem";
 export const KfwBaseSpaceFluid5Min = "0.5rem";
 export const KfwBaseSpaceFluid5Max = "1rem";
-export const KfwBaseSpaceFluid5Val = "0.588px";
+export const KfwBaseSpaceFluid5Val = "0.735vi + 0.588px";
 export const KfwBaseSpaceFluid10Min = "1rem";
 export const KfwBaseSpaceFluid10Max = "1.5rem";
-export const KfwBaseSpaceFluid10Val = "0.5588rem";
+export const KfwBaseSpaceFluid10Val = "0.735vi + 0.5588rem";
 export const KfwBaseSpaceFluid15Min = "1.5rem";
 export const KfwBaseSpaceFluid15Max = "2rem";
-export const KfwBaseSpaceFluid15Val = "1.0588rem";
+export const KfwBaseSpaceFluid15Val = "0.735vi + 1.0588rem";
 export const KfwBaseSpaceFluid20Min = "2rem";
 export const KfwBaseSpaceFluid20Max = "2.5rem";
-export const KfwBaseSpaceFluid20Val = "1.5588rem";
+export const KfwBaseSpaceFluid20Val = "0.735vi + 1.5588rem";
 export const KfwBaseSpaceFluid25Min = "2.5rem";
 export const KfwBaseSpaceFluid25Max = "3rem";
-export const KfwBaseSpaceFluid25Val = "2.0588rem";
+export const KfwBaseSpaceFluid25Val = "0.735vi + 2.0588rem";
 export const KfwBaseSpaceFluid30Min = "3rem";
 export const KfwBaseSpaceFluid30Max = "3.5rem";
-export const KfwBaseSpaceFluid30Val = "2.5588rem";
+export const KfwBaseSpaceFluid30Val = "0.735vi + 2.5588rem";
 export const KfwBaseSpaceFluid35Min = "3.5rem";
 export const KfwBaseSpaceFluid35Max = "4rem";
-export const KfwBaseSpaceFluid35Val = "3.0588rem";
+export const KfwBaseSpaceFluid35Val = "0.735vi + 3.0588rem";
 export const KfwBaseSpaceFluid40Min = "4rem";
 export const KfwBaseSpaceFluid40Max = "5rem";
-export const KfwBaseSpaceFluid40Val = "3.1176rem";
+export const KfwBaseSpaceFluid40Val = "1.471vi + 3.1176rem";
 export const KfwBaseSpaceFluid50Min = "5rem";
 export const KfwBaseSpaceFluid50Max = "6rem";
-export const KfwBaseSpaceFluid50Val = "4.1176rem";
+export const KfwBaseSpaceFluid50Val = "1.471vi + 4.1176rem";
 export const KfwBaseFontsizeStaticSm = "1.4rem";
 export const KfwBaseFontsizeStaticMd = "1.6rem";
 export const KfwBaseFontsizeStaticLg = "1.8rem";
@@ -201,31 +201,31 @@ export const KfwBaseFontsizeStatic7xl = "3.2rem";
 export const KfwBaseFontsizeStatic8xl = "3.6rem";
 export const KfwBaseFontsizeFluidSmMin = "1.4rem";
 export const KfwBaseFontsizeFluidSmMax = "1.6rem";
-export const KfwBaseFontsizeFluidSmVal = "1.2235rem";
+export const KfwBaseFontsizeFluidSmVal = "0.294vi + 1.2235rem";
 export const KfwBaseFontsizeFluidMdMin = "1.6rem";
 export const KfwBaseFontsizeFluidMdMax = "1.8rem";
-export const KfwBaseFontsizeFluidMdVal = "1.4235rem";
+export const KfwBaseFontsizeFluidMdVal = "0.294vi + 1.4235rem";
 export const KfwBaseFontsizeFluidLgMin = "1.8rem";
 export const KfwBaseFontsizeFluidLgMax = "2rem";
-export const KfwBaseFontsizeFluidLgVal = "1.6235rem";
+export const KfwBaseFontsizeFluidLgVal = "0.294vi + 1.6235rem";
 export const KfwBaseFontsizeFluidXlMin = "2rem";
 export const KfwBaseFontsizeFluidXlMax = "2.2rem";
-export const KfwBaseFontsizeFluidXlVal = "1.8235rem";
+export const KfwBaseFontsizeFluidXlVal = "0.294vi + 1.8235rem";
 export const KfwBaseFontsizeFluid2xlMin = "2.2rem";
 export const KfwBaseFontsizeFluid2xlMax = "2.4rem";
-export const KfwBaseFontsizeFluid2xlVal = "2.0235rem";
+export const KfwBaseFontsizeFluid2xlVal = "0.294vi + 2.0235rem";
 export const KfwBaseFontsizeFluid3xlMin = "2.4rem";
 export const KfwBaseFontsizeFluid3xlMax = "2.6rem";
-export const KfwBaseFontsizeFluid3xlVal = "2.2235rem";
+export const KfwBaseFontsizeFluid3xlVal = "0.294vi + 2.2235rem";
 export const KfwBaseFontsizeFluid4xlMin = "2.6rem";
 export const KfwBaseFontsizeFluid4xlMax = "2.8rem";
-export const KfwBaseFontsizeFluid4xlVal = "2.4234999999999998rem";
+export const KfwBaseFontsizeFluid4xlVal = "0.294vi + 2.4234999999999998rem";
 export const KfwBaseFontsizeFluid5xlMin = "2.8rem";
 export const KfwBaseFontsizeFluid5xlMax = "3.2rem";
-export const KfwBaseFontsizeFluid5xlVal = "2.4471rem";
+export const KfwBaseFontsizeFluid5xlVal = "0.588vi + 2.4471rem";
 export const KfwBaseFontsizeFluid6xlMin = "3rem";
 export const KfwBaseFontsizeFluid6xlMax = "3.6rem";
-export const KfwBaseFontsizeFluid6xlVal = "2.4706rem";
+export const KfwBaseFontsizeFluid6xlVal = "0.882vi + 2.4706rem";
 export const KfwBaseLineheight2xs = 1.2;
 export const KfwBaseLineheightXs = 1.3;
 export const KfwBaseLineheightSm = 1.333;
@@ -255,7 +255,7 @@ export const KfwBaseLayoutSafezoneStaticMd = "2rem";
 export const KfwBaseLayoutSafezoneStaticLg = "4rem";
 export const KfwBaseLayoutSafezoneFluidMin = "2rem";
 export const KfwBaseLayoutSafezoneFluidMax = "4rem";
-export const KfwBaseLayoutSafezoneFluidVal = "0.2353rem";
+export const KfwBaseLayoutSafezoneFluidVal = "2.941vi + 0.2353rem";
 export const KfwBaseLayoutGridcolumn1 = 1;
 export const KfwBaseLayoutGridcolumn2 = 2;
 export const KfwBaseLayoutGridcolumn3 = 3;
@@ -270,7 +270,7 @@ export const KfwBaseLayoutGridgapStaticLg = "2.6rem";
 export const KfwBaseLayoutGridgapStaticXl = "3.6rem";
 export const KfwBaseLayoutGridgapFluidMin = "1.2rem";
 export const KfwBaseLayoutGridgapFluidMax = "3.6rem";
-export const KfwBaseLayoutGridgapFluidVal = "-0.9176rem";
+export const KfwBaseLayoutGridgapFluidVal = "3.529vi - 0.9176rem";
 export const KfwColorFn = {
   colorSpace: "srgb",
   components: [0, 0.3529, 0.549],
@@ -365,25 +365,25 @@ export const KfwColorOpaqueWhite95 = {
 }; // White 95%
 export const KfwColorOpaqueGray50010 = {
   colorSpace: "srgb",
-  components: [0.2549, 0.2784, 0.298],
+  components: [0.2549, 0.2824, 0.298],
   hex: "#41484c",
   alpha: 0.1,
 }; // Gray 500 10%
 export const KfwColorOpaqueGray50030 = {
   colorSpace: "srgb",
-  components: [0.2549, 0.2784, 0.298],
+  components: [0.2549, 0.2824, 0.298],
   hex: "#41484c",
   alpha: 0.3,
 }; // Gray 500 30%
 export const KfwColorOpaqueGray50090 = {
   colorSpace: "srgb",
-  components: [0.2549, 0.2784, 0.298],
+  components: [0.2549, 0.2824, 0.298],
   hex: "#41484c",
   alpha: 0.9,
 }; // Gray 500 90%
 export const KfwColorStateDanger = {
   colorSpace: "srgb",
-  components: [0.7843, 0.0196, 0.2157],
+  components: [0.7843, 0.0196, 0.2196],
   hex: "#c80538",
 };
 export const KfwColorStateSuccess = {
@@ -398,7 +398,7 @@ export const KfwColorStateWarning = {
 };
 export const KfwColorStatusRed = {
   colorSpace: "srgb",
-  components: [0.7843, 0.0196, 0.2157],
+  components: [0.7843, 0.0196, 0.2196],
   hex: "#c80538",
 };
 export const KfwColorStatusYellow = {
@@ -468,7 +468,7 @@ export const KfwColorProductCooperation = {
 };
 export const KfwColorProductCreditBenefit = {
   colorSpace: "srgb",
-  components: [0.2549, 0.2784, 0.298],
+  components: [0.2549, 0.2824, 0.298],
   hex: "#41484c",
 };
 export const KfwColorIcon = {
@@ -500,10 +500,10 @@ export const KfwSpaceSmall = "2rem";
 export const KfwSpaceMedium = "3rem";
 export const KfwSpaceLargeMin = "3.5rem";
 export const KfwSpaceLargeMax = "4rem";
-export const KfwSpaceLargeVal = "3.0588rem";
+export const KfwSpaceLargeVal = "0.735vi + 3.0588rem";
 export const KfwSpaceBigMin = "5rem";
 export const KfwSpaceBigMax = "6rem";
-export const KfwSpaceBigVal = "4.1176rem";
+export const KfwSpaceBigVal = "1.471vi + 4.1176rem";
 export const KfwFontspace = "2rem";
 export const KfwFontspace2xsmall = "0.5rem";
 export const KfwFontspaceXsmall = "1rem";
@@ -521,16 +521,16 @@ export const KfwFontsizeLarge = "1.8rem";
 export const KfwFontsizeSmall = "1.4rem";
 export const KfwFontsizeHeading1Min = "3rem";
 export const KfwFontsizeHeading1Max = "3.6rem";
-export const KfwFontsizeHeading1Val = "2.4706rem";
+export const KfwFontsizeHeading1Val = "0.882vi + 2.4706rem";
 export const KfwFontsizeHeading2Min = "2.8rem";
 export const KfwFontsizeHeading2Max = "3.2rem";
-export const KfwFontsizeHeading2Val = "2.4471rem";
+export const KfwFontsizeHeading2Val = "0.588vi + 2.4471rem";
 export const KfwFontsizeHeading3Min = "2.4rem";
 export const KfwFontsizeHeading3Max = "2.6rem";
-export const KfwFontsizeHeading3Val = "2.2235rem";
+export const KfwFontsizeHeading3Val = "0.294vi + 2.2235rem";
 export const KfwFontsizeHeading4Min = "2rem";
 export const KfwFontsizeHeading4Max = "2.2rem";
-export const KfwFontsizeHeading4Val = "1.8235rem";
+export const KfwFontsizeHeading4Val = "0.294vi + 1.8235rem";
 export const KfwFontsizeHeading5 = "1.8rem";
 export const KfwFontsizeHeading6 = "1.6rem";
 export const KfwLineheight = 1.4;
@@ -558,4 +558,4 @@ export const KfwContentwrapperBasic = "108rem";
 export const KfwContentwrapperExtended = "128rem";
 export const KfwSafezoneMin = "2rem";
 export const KfwSafezoneMax = "4rem";
-export const KfwSafezoneVal = "0.2353rem";
+export const KfwSafezoneVal = "2.941vi + 0.2353rem";

package/output/json/kfw-design-tokens.json

@@ -796,7 +796,7 @@
               "colorSpace": "srgb",
               "components": [
                 0.2549,
-                0.2784,
+                0.2824,
                 0.298
               ],
               "hex": "#41484c",
@@ -810,7 +810,7 @@
                 "colorSpace": "srgb",
                 "components": [
                   0.2549,
-                  0.2784,
+                  0.2824,
                   0.298
                 ],
                 "hex": "#41484c",
@@ -841,7 +841,7 @@
               "colorSpace": "srgb",
               "components": [
                 0.2549,
-                0.2784,
+                0.2824,
                 0.298
               ],
               "hex": "#41484c",
@@ -855,7 +855,7 @@
                 "colorSpace": "srgb",
                 "components": [
                   0.2549,
-                  0.2784,
+                  0.2824,
                   0.298
                 ],
                 "hex": "#41484c",
@@ -886,7 +886,7 @@
               "colorSpace": "srgb",
               "components": [
                 0.2549,
-                0.2784,
+                0.2824,
                 0.298
               ],
               "hex": "#41484c",
@@ -900,7 +900,7 @@
                 "colorSpace": "srgb",
                 "components": [
                   0.2549,
-                  0.2784,
+                  0.2824,
                   0.298
                 ],
                 "hex": "#41484c",
@@ -931,7 +931,7 @@
               "colorSpace": "srgb",
               "components": [
                 0.2549,
-                0.2784,
+                0.2824,
                 0.298
               ],
               "hex": "#41484c"
@@ -944,7 +944,7 @@
                 "colorSpace": "srgb",
                 "components": [
                   0.2549,
-                  0.2784,
+                  0.2824,
                   0.298
                 ],
                 "hex": "#41484c"
@@ -1103,7 +1103,7 @@
             "components": [
               0.7843,
               0.0196,
-              0.2157
+              0.2196
             ],
             "hex": "#c80538"
           },
@@ -1116,7 +1116,7 @@
               "components": [
                 0.7843,
                 0.0196,
-                0.2157
+                0.2196
               ],
               "hex": "#c80538"
             },
@@ -5145,7 +5145,7 @@
             "colorSpace": "srgb",
             "components": [
               0.2549,
-              0.2784,
+              0.2824,
               0.298
             ],
             "hex": "#41484c",
@@ -5181,7 +5181,7 @@
             "colorSpace": "srgb",
             "components": [
               0.2549,
-              0.2784,
+              0.2824,
               0.298
             ],
             "hex": "#41484c",
@@ -5217,7 +5217,7 @@
             "colorSpace": "srgb",
             "components": [
               0.2549,
-              0.2784,
+              0.2824,
               0.298
             ],
             "hex": "#41484c",
@@ -5256,7 +5256,7 @@
             "components": [
               0.7843,
               0.0196,
-              0.2157
+              0.2196
             ],
             "hex": "#c80538"
           },
@@ -5357,7 +5357,7 @@
             "components": [
               0.7843,
               0.0196,
-              0.2157
+              0.2196
             ],
             "hex": "#c80538"
           },
@@ -5822,7 +5822,7 @@
             "colorSpace": "srgb",
             "components": [
               0.2549,
-              0.2784,
+              0.2824,
               0.298
             ],
             "hex": "#41484c"

package/output/penpot/kfw-design-tokens.light.json

@@ -55,12 +55,12 @@
           "$type": "color"
         },
         "Default": {
-          "$value": "#ffffff",
+          "$value": "#fff",
           "$type": "color"
         }
       },
       "Black": {
-        "$value": "#000000",
+        "$value": "#000",
         "$type": "color"
       },
       "Gray": {
@@ -337,11 +337,11 @@
           "$type": "color"
         },
         "On-dark-bg": {
-          "$value": "#ffffff",
+          "$value": "#fff",
           "$type": "color"
         },
         "On-disabled": {
-          "$value": "#ffffff",
+          "$value": "#fff",
           "$type": "color"
         },
         "Headline-on-dark-bg": {
@@ -351,7 +351,7 @@
       },
       "Background": {
         "Default": {
-          "$value": "#ffffff",
+          "$value": "#fff",
           "$type": "color"
         },
         "Subtle": {

package/output/scss/kfw-design-tokens.light.scss

@@ -1,5 +1,5 @@
 
-// KfW Design Tokens v0.5.7 | MPL-2.0 | https://github.com/openkfw/design-tokens
+// KfW Design Tokens v0.5.9 | MPL-2.0 | https://github.com/openkfw/design-tokens
 
 $kfw-base-color-blue-100: #e9f5fb;
 $kfw-base-color-blue-400: #54b3e2;
@@ -13,8 +13,8 @@ $kfw-base-color-green-400: #94eb90;
 $kfw-base-color-green-700: #398357;
 $kfw-base-color-white-90: #ffffffe6;
 $kfw-base-color-white-95: #fffffff2;
-$kfw-base-color-white: #ffffff;
-$kfw-base-color-black: #000000;
+$kfw-base-color-white: #fff;
+$kfw-base-color-black: #000;
 $kfw-base-color-gray-50: #f6f7f8;
 $kfw-base-color-gray-100: #eef0f2;
 $kfw-base-color-gray-200: #d8dfe3;
@@ -157,10 +157,10 @@ $kfw-color-fn-inactive: #a1adb5; // Interaction color when inactive (Gray 300)
 $kfw-color-fn-border: #2d3134; // Interaction border color (Gray 600)
 $kfw-color-fn-label: #2d3134; // Interaction label color (Gray 600)
 $kfw-color-text: #2d3134; // Main text color for body (Gray 600)
-$kfw-color-text-on-dark-bg: #ffffff; // Main text color on dark background (White)
-$kfw-color-text-on-disabled: #ffffff; // Main text color on disabled (White)
+$kfw-color-text-on-dark-bg: #fff; // Main text color on dark background (White)
+$kfw-color-text-on-disabled: #fff; // Main text color on disabled (White)
 $kfw-color-text-headline-on-dark-bg: #b7f9aa; // Headline text color on dark background (Green 300)
-$kfw-color-background: #ffffff; // Main background color for body (White)
+$kfw-color-background: #fff; // Main background color for body (White)
 $kfw-color-background-subtle: #f6f7f8; // Neutral (Gray 50)
 $kfw-color-background-disabled: #a1adb5; // Disabled (Gray 300)
 $kfw-color-background-light-blue: #e9f5fb; // Light blue (Blue 100)

package/output/web_thirdparty_16px/css/kfw-design-tokens.light.css

@@ -1,10 +1,10 @@
 /**
- * KfW Design Tokens v0.5.7 | MPL-2.0 | https://github.com/openkfw/design-tokens
+ * KfW Design Tokens v0.5.9 | MPL-2.0 | https://github.com/openkfw/design-tokens
  */
 
-:root, :host, .kfw-theme--light { color-scheme: light; }
+[data-theme=light], :root:not([data-theme=dark]), :host(:not([data-theme=dark])) { color-scheme: light; }
 
-:root, :host, .kfw-theme--light {
+[data-theme=light], :root:not([data-theme=dark]), :host(:not([data-theme=dark])) {
   --kfw-base-color-blue-100: #e9f5fb;
   --kfw-base-color-blue-400: #54b3e2;
   --kfw-base-color-blue-500: #007abc;
@@ -17,8 +17,8 @@
   --kfw-base-color-green-700: #398357;
   --kfw-base-color-white-90: #ffffffe6;
   --kfw-base-color-white-95: #fffffff2;
-  --kfw-base-color-white: #ffffff;
-  --kfw-base-color-black: #000000;
+  --kfw-base-color-white: #fff;
+  --kfw-base-color-black: #000;
   --kfw-base-color-gray-50: #f6f7f8;
   --kfw-base-color-gray-100: #eef0f2;
   --kfw-base-color-gray-200: #d8dfe3;
@@ -161,10 +161,10 @@
   --kfw-color-fn-border: #2d3134; /** Interaction border color (Gray 600) */
   --kfw-color-fn-label: #2d3134; /** Interaction label color (Gray 600) */
   --kfw-color-text: #2d3134; /** Main text color for body (Gray 600) */
-  --kfw-color-text-on-dark-bg: #ffffff; /** Main text color on dark background (White) */
-  --kfw-color-text-on-disabled: #ffffff; /** Main text color on disabled (White) */
+  --kfw-color-text-on-dark-bg: #fff; /** Main text color on dark background (White) */
+  --kfw-color-text-on-disabled: #fff; /** Main text color on disabled (White) */
   --kfw-color-text-headline-on-dark-bg: #b7f9aa; /** Headline text color on dark background (Green 300) */
-  --kfw-color-background: #ffffff; /** Main background color for body (White) */
+  --kfw-color-background: #fff; /** Main background color for body (White) */
   --kfw-color-background-subtle: #f6f7f8; /** Neutral (Gray 50) */
   --kfw-color-background-disabled: #a1adb5; /** Disabled (Gray 300) */
   --kfw-color-background-light-blue: #e9f5fb; /** Light blue (Blue 100) */

package/output/web_thirdparty_16px/js/kfw-design-tokens.light.js

@@ -1,5 +1,5 @@
 /**
- * KfW Design Tokens v0.5.7 | MPL-2.0 | https://github.com/openkfw/design-tokens
+ * KfW Design Tokens v0.5.9 | MPL-2.0 | https://github.com/openkfw/design-tokens
  */
 
 export const KfwBaseColorBlue100 = {
@@ -101,25 +101,25 @@ export const KfwBaseColorGray400 = {
 };
 export const KfwBaseColorGray50010 = {
   colorSpace: "srgb",
-  components: [0.2549, 0.2784, 0.298],
+  components: [0.2549, 0.2824, 0.298],
   hex: "#41484c",
   alpha: 0.1,
 };
 export const KfwBaseColorGray50030 = {
   colorSpace: "srgb",
-  components: [0.2549, 0.2784, 0.298],
+  components: [0.2549, 0.2824, 0.298],
   hex: "#41484c",
   alpha: 0.3,
 };
 export const KfwBaseColorGray50090 = {
   colorSpace: "srgb",
-  components: [0.2549, 0.2784, 0.298],
+  components: [0.2549, 0.2824, 0.298],
   hex: "#41484c",
   alpha: 0.9,
 };
 export const KfwBaseColorGray500 = {
   colorSpace: "srgb",
-  components: [0.2549, 0.2784, 0.298],
+  components: [0.2549, 0.2824, 0.298],
   hex: "#41484c",
 };
 export const KfwBaseColorGray600 = {
@@ -139,7 +139,7 @@ export const KfwBaseColorViolet500 = {
 };
 export const KfwBaseColorRed400 = {
   colorSpace: "srgb",
-  components: [0.7843, 0.0196, 0.2157],
+  components: [0.7843, 0.0196, 0.2196],
   hex: "#c80538",
 };
 export const KfwBaseColorYellow500 = {
@@ -163,31 +163,31 @@ export const KfwBaseSpaceStatic50 = "3.125rem";
 export const KfwBaseSpaceStatic60 = "3.75rem";
 export const KfwBaseSpaceFluid5Min = "0.3125rem";
 export const KfwBaseSpaceFluid5Max = "0.625rem";
-export const KfwBaseSpaceFluid5Val = "0.588px";
+export const KfwBaseSpaceFluid5Val = "0.735vi + 0.588px";
 export const KfwBaseSpaceFluid10Min = "0.625rem";
 export const KfwBaseSpaceFluid10Max = "0.9375rem";
-export const KfwBaseSpaceFluid10Val = "0.34925rem";
+export const KfwBaseSpaceFluid10Val = "0.735vi + 0.34925rem";
 export const KfwBaseSpaceFluid15Min = "0.9375rem";
 export const KfwBaseSpaceFluid15Max = "1.25rem";
-export const KfwBaseSpaceFluid15Val = "0.66175rem";
+export const KfwBaseSpaceFluid15Val = "0.735vi + 0.66175rem";
 export const KfwBaseSpaceFluid20Min = "1.25rem";
 export const KfwBaseSpaceFluid20Max = "1.5625rem";
-export const KfwBaseSpaceFluid20Val = "0.97425rem";
+export const KfwBaseSpaceFluid20Val = "0.735vi + 0.97425rem";
 export const KfwBaseSpaceFluid25Min = "1.5625rem";
 export const KfwBaseSpaceFluid25Max = "1.875rem";
-export const KfwBaseSpaceFluid25Val = "1.28675rem";
+export const KfwBaseSpaceFluid25Val = "0.735vi + 1.28675rem";
 export const KfwBaseSpaceFluid30Min = "1.875rem";
 export const KfwBaseSpaceFluid30Max = "2.1875rem";
-export const KfwBaseSpaceFluid30Val = "1.59925rem";
+export const KfwBaseSpaceFluid30Val = "0.735vi + 1.59925rem";
 export const KfwBaseSpaceFluid35Min = "2.1875rem";
 export const KfwBaseSpaceFluid35Max = "2.5rem";
-export const KfwBaseSpaceFluid35Val = "1.91175rem";
+export const KfwBaseSpaceFluid35Val = "0.735vi + 1.91175rem";
 export const KfwBaseSpaceFluid40Min = "2.5rem";
 export const KfwBaseSpaceFluid40Max = "3.125rem";
-export const KfwBaseSpaceFluid40Val = "1.9485rem";
+export const KfwBaseSpaceFluid40Val = "1.471vi + 1.9485rem";
 export const KfwBaseSpaceFluid50Min = "3.125rem";
 export const KfwBaseSpaceFluid50Max = "3.75rem";
-export const KfwBaseSpaceFluid50Val = "2.5735rem";
+export const KfwBaseSpaceFluid50Val = "1.471vi + 2.5735rem";
 export const KfwBaseFontsizeStaticSm = "0.875rem";
 export const KfwBaseFontsizeStaticMd = "1rem";
 export const KfwBaseFontsizeStaticLg = "1.125rem";
@@ -201,31 +201,31 @@ export const KfwBaseFontsizeStatic7xl = "2rem";
 export const KfwBaseFontsizeStatic8xl = "2.25rem";
 export const KfwBaseFontsizeFluidSmMin = "0.875rem";
 export const KfwBaseFontsizeFluidSmMax = "1rem";
-export const KfwBaseFontsizeFluidSmVal = "0.7646875rem";
+export const KfwBaseFontsizeFluidSmVal = "0.294vi + 0.7646875rem";
 export const KfwBaseFontsizeFluidMdMin = "1rem";
 export const KfwBaseFontsizeFluidMdMax = "1.125rem";
-export const KfwBaseFontsizeFluidMdVal = "0.8896875rem";
+export const KfwBaseFontsizeFluidMdVal = "0.294vi + 0.8896875rem";
 export const KfwBaseFontsizeFluidLgMin = "1.125rem";
 export const KfwBaseFontsizeFluidLgMax = "1.25rem";
-export const KfwBaseFontsizeFluidLgVal = "1.0146875rem";
+export const KfwBaseFontsizeFluidLgVal = "0.294vi + 1.0146875rem";
 export const KfwBaseFontsizeFluidXlMin = "1.25rem";
 export const KfwBaseFontsizeFluidXlMax = "1.375rem";
-export const KfwBaseFontsizeFluidXlVal = "1.1396875rem";
+export const KfwBaseFontsizeFluidXlVal = "0.294vi + 1.1396875rem";
 export const KfwBaseFontsizeFluid2xlMin = "1.375rem";
 export const KfwBaseFontsizeFluid2xlMax = "1.5rem";
-export const KfwBaseFontsizeFluid2xlVal = "1.2646875rem";
+export const KfwBaseFontsizeFluid2xlVal = "0.294vi + 1.2646875rem";
 export const KfwBaseFontsizeFluid3xlMin = "1.5rem";
 export const KfwBaseFontsizeFluid3xlMax = "1.625rem";
-export const KfwBaseFontsizeFluid3xlVal = "1.3896875rem";
+export const KfwBaseFontsizeFluid3xlVal = "0.294vi + 1.3896875rem";
 export const KfwBaseFontsizeFluid4xlMin = "1.625rem";
 export const KfwBaseFontsizeFluid4xlMax = "1.75rem";
-export const KfwBaseFontsizeFluid4xlVal = "1.5146875rem";
+export const KfwBaseFontsizeFluid4xlVal = "0.294vi + 1.5146875rem";
 export const KfwBaseFontsizeFluid5xlMin = "1.75rem";
 export const KfwBaseFontsizeFluid5xlMax = "2rem";
-export const KfwBaseFontsizeFluid5xlVal = "1.5294375rem";
+export const KfwBaseFontsizeFluid5xlVal = "0.588vi + 1.5294375rem";
 export const KfwBaseFontsizeFluid6xlMin = "1.875rem";
 export const KfwBaseFontsizeFluid6xlMax = "2.25rem";
-export const KfwBaseFontsizeFluid6xlVal = "1.544125rem";
+export const KfwBaseFontsizeFluid6xlVal = "0.882vi + 1.544125rem";
 export const KfwBaseLineheight2xs = 1.2;
 export const KfwBaseLineheightXs = 1.3;
 export const KfwBaseLineheightSm = 1.333;
@@ -255,7 +255,7 @@ export const KfwBaseLayoutSafezoneStaticMd = "1.25rem";
 export const KfwBaseLayoutSafezoneStaticLg = "2.5rem";
 export const KfwBaseLayoutSafezoneFluidMin = "1.25rem";
 export const KfwBaseLayoutSafezoneFluidMax = "2.5rem";
-export const KfwBaseLayoutSafezoneFluidVal = "0.1470625rem";
+export const KfwBaseLayoutSafezoneFluidVal = "2.941vi + 0.1470625rem";
 export const KfwBaseLayoutGridcolumn1 = 1;
 export const KfwBaseLayoutGridcolumn2 = 2;
 export const KfwBaseLayoutGridcolumn3 = 3;
@@ -270,7 +270,7 @@ export const KfwBaseLayoutGridgapStaticLg = "1.625rem";
 export const KfwBaseLayoutGridgapStaticXl = "2.25rem";
 export const KfwBaseLayoutGridgapFluidMin = "0.75rem";
 export const KfwBaseLayoutGridgapFluidMax = "2.25rem";
-export const KfwBaseLayoutGridgapFluidVal = "-0.5735rem";
+export const KfwBaseLayoutGridgapFluidVal = "3.529vi - 0.5735rem";
 export const KfwColorFn = {
   colorSpace: "srgb",
   components: [0, 0.3529, 0.549],
@@ -365,25 +365,25 @@ export const KfwColorOpaqueWhite95 = {
 }; // White 95%
 export const KfwColorOpaqueGray50010 = {
   colorSpace: "srgb",
-  components: [0.2549, 0.2784, 0.298],
+  components: [0.2549, 0.2824, 0.298],
   hex: "#41484c",
   alpha: 0.1,
 }; // Gray 500 10%
 export const KfwColorOpaqueGray50030 = {
   colorSpace: "srgb",
-  components: [0.2549, 0.2784, 0.298],
+  components: [0.2549, 0.2824, 0.298],
   hex: "#41484c",
   alpha: 0.3,
 }; // Gray 500 30%
 export const KfwColorOpaqueGray50090 = {
   colorSpace: "srgb",
-  components: [0.2549, 0.2784, 0.298],
+  components: [0.2549, 0.2824, 0.298],
   hex: "#41484c",
   alpha: 0.9,
 }; // Gray 500 90%
 export const KfwColorStateDanger = {
   colorSpace: "srgb",
-  components: [0.7843, 0.0196, 0.2157],
+  components: [0.7843, 0.0196, 0.2196],
   hex: "#c80538",
 };
 export const KfwColorStateSuccess = {
@@ -398,7 +398,7 @@ export const KfwColorStateWarning = {
 };
 export const KfwColorStatusRed = {
   colorSpace: "srgb",
-  components: [0.7843, 0.0196, 0.2157],
+  components: [0.7843, 0.0196, 0.2196],
   hex: "#c80538",
 };
 export const KfwColorStatusYellow = {
@@ -468,7 +468,7 @@ export const KfwColorProductCooperation = {
 };
 export const KfwColorProductCreditBenefit = {
   colorSpace: "srgb",
-  components: [0.2549, 0.2784, 0.298],
+  components: [0.2549, 0.2824, 0.298],
   hex: "#41484c",
 };
 export const KfwColorIcon = {
@@ -500,10 +500,10 @@ export const KfwSpaceSmall = "1.25rem";
 export const KfwSpaceMedium = "1.875rem";
 export const KfwSpaceLargeMin = "2.1875rem";
 export const KfwSpaceLargeMax = "2.5rem";
-export const KfwSpaceLargeVal = "1.91175rem";
+export const KfwSpaceLargeVal = "0.735vi + 1.91175rem";
 export const KfwSpaceBigMin = "3.125rem";
 export const KfwSpaceBigMax = "3.75rem";
-export const KfwSpaceBigVal = "2.5735rem";
+export const KfwSpaceBigVal = "1.471vi + 2.5735rem";
 export const KfwFontspace = "1.25rem";
 export const KfwFontspace2xsmall = "0.3125rem";
 export const KfwFontspaceXsmall = "0.625rem";
@@ -521,16 +521,16 @@ export const KfwFontsizeLarge = "1.125rem";
 export const KfwFontsizeSmall = "0.875rem";
 export const KfwFontsizeHeading1Min = "1.875rem";
 export const KfwFontsizeHeading1Max = "2.25rem";
-export const KfwFontsizeHeading1Val = "1.544125rem";
+export const KfwFontsizeHeading1Val = "0.882vi + 1.544125rem";
 export const KfwFontsizeHeading2Min = "1.75rem";
 export const KfwFontsizeHeading2Max = "2rem";
-export const KfwFontsizeHeading2Val = "1.5294375rem";
+export const KfwFontsizeHeading2Val = "0.588vi + 1.5294375rem";
 export const KfwFontsizeHeading3Min = "1.5rem";
 export const KfwFontsizeHeading3Max = "1.625rem";
-export const KfwFontsizeHeading3Val = "1.3896875rem";
+export const KfwFontsizeHeading3Val = "0.294vi + 1.3896875rem";
 export const KfwFontsizeHeading4Min = "1.25rem";
 export const KfwFontsizeHeading4Max = "1.375rem";
-export const KfwFontsizeHeading4Val = "1.1396875rem";
+export const KfwFontsizeHeading4Val = "0.294vi + 1.1396875rem";
 export const KfwFontsizeHeading5 = "1.125rem";
 export const KfwFontsizeHeading6 = "1rem";
 export const KfwLineheight = 1.4;
@@ -558,4 +558,4 @@ export const KfwContentwrapperBasic = "67.5rem";
 export const KfwContentwrapperExtended = "80rem";
 export const KfwSafezoneMin = "1.25rem";
 export const KfwSafezoneMax = "2.5rem";
-export const KfwSafezoneVal = "0.1470625rem";
+export const KfwSafezoneVal = "2.941vi + 0.1470625rem";

package/output/web_thirdparty_16px/scss/kfw-design-tokens.light.scss

@@ -1,5 +1,5 @@
 
-// KfW Design Tokens v0.5.7 | MPL-2.0 | https://github.com/openkfw/design-tokens
+// KfW Design Tokens v0.5.9 | MPL-2.0 | https://github.com/openkfw/design-tokens
 
 $kfw-base-color-blue-100: #e9f5fb;
 $kfw-base-color-blue-400: #54b3e2;
@@ -13,8 +13,8 @@ $kfw-base-color-green-400: #94eb90;
 $kfw-base-color-green-700: #398357;
 $kfw-base-color-white-90: #ffffffe6;
 $kfw-base-color-white-95: #fffffff2;
-$kfw-base-color-white: #ffffff;
-$kfw-base-color-black: #000000;
+$kfw-base-color-white: #fff;
+$kfw-base-color-black: #000;
 $kfw-base-color-gray-50: #f6f7f8;
 $kfw-base-color-gray-100: #eef0f2;
 $kfw-base-color-gray-200: #d8dfe3;
@@ -157,10 +157,10 @@ $kfw-color-fn-inactive: #a1adb5; // Interaction color when inactive (Gray 300)
 $kfw-color-fn-border: #2d3134; // Interaction border color (Gray 600)
 $kfw-color-fn-label: #2d3134; // Interaction label color (Gray 600)
 $kfw-color-text: #2d3134; // Main text color for body (Gray 600)
-$kfw-color-text-on-dark-bg: #ffffff; // Main text color on dark background (White)
-$kfw-color-text-on-disabled: #ffffff; // Main text color on disabled (White)
+$kfw-color-text-on-dark-bg: #fff; // Main text color on dark background (White)
+$kfw-color-text-on-disabled: #fff; // Main text color on disabled (White)
 $kfw-color-text-headline-on-dark-bg: #b7f9aa; // Headline text color on dark background (Green 300)
-$kfw-color-background: #ffffff; // Main background color for body (White)
+$kfw-color-background: #fff; // Main background color for body (White)
 $kfw-color-background-subtle: #f6f7f8; // Neutral (Gray 50)
 $kfw-color-background-disabled: #a1adb5; // Disabled (Gray 300)
 $kfw-color-background-light-blue: #e9f5fb; // Light blue (Blue 100)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openkfw/design-tokens",
-  "version": "0.5.7",
+  "version": "0.5.9",
   "description": "The source of truth for KfW-branded digital products.",
   "files": [
     "README.md",
@@ -22,7 +22,7 @@
     "update": "npx npm-check-updates -u",
     "editor": "jsoneditor-cli --initialExpand false --engine svelte-jsoneditor load tokens/tokens.json",
     "editor:dark": "jsoneditor-cli --port 5054 --engine svelte-jsoneditor load tokens/extended/tokens/tokens.dark.json",
-    "lint": "eslint . --ignore-pattern output --fix",
+    "lint": "eslint --ignore-pattern demo . --fix",
     "format": "npx prettier ./ --write --config .prettierrc.json",
     "typecheck": "tsc --noEmit",
     "precommit": "npm run typecheck && npm run format && npm run lint"
@@ -41,21 +41,22 @@
     "node": ">= 22.0.0"
   },
   "devDependencies": {
-    "@eslint/js": "^9.39.1",
+    "@eslint/js": "^9.39.2",
     "@tsconfig/node24": "^24.0.3",
     "@types/lodash": "^4.17.21",
-    "@types/node": "^25.0.1",
+    "@types/node": "^24.10.4",
     "concurrently": "^9.2.1",
     "deep-get-set-ts": "^1.1.2",
-    "eslint": "^9.39.1",
+    "eslint": "^9.39.2",
     "json5": "^2.2.3",
     "jsoneditor-cli": "^1.1.0",
     "lodash": "4.17.21",
+    "npm-check-updates": "^19.2.0",
     "prettier": "^3.7.4",
     "style-dictionary": "^5.1.1",
+    "style-dictionary-utils": "^6.0.1",
     "tsx": "^4.21.0",
     "typescript": "^5.9.3",
-    "typescript-eslint": "^8.49.0",
-    "npm-check-updates": "^19.2.0"
+    "typescript-eslint": "^8.50.0"
   }
 }

package/tokens/gen-tokens.dark.json5

@@ -231,7 +231,7 @@
               colorSpace: "srgb",
               components: [
                 0.2549,
-                0.2784,
+                0.2824,
                 0.298,
               ],
               hex: "#41484c",
@@ -243,7 +243,7 @@
               colorSpace: "srgb",
               components: [
                 0.2549,
-                0.2784,
+                0.2824,
                 0.298,
               ],
               hex: "#41484c",
@@ -255,7 +255,7 @@
               colorSpace: "srgb",
               components: [
                 0.2549,
-                0.2784,
+                0.2824,
                 0.298,
               ],
               hex: "#41484c",
@@ -267,7 +267,7 @@
               colorSpace: "srgb",
               components: [
                 0.2549,
-                0.2784,
+                0.2824,
                 0.298,
               ],
               hex: "#41484c",
@@ -317,7 +317,7 @@
             components: [
               0.7843,
               0.0196,
-              0.2157,
+              0.2196,
             ],
             hex: "#c80538",
           },

package/tokens/tokens.json

@@ -29,10 +29,10 @@
         "300": { "$value": { "colorSpace": "srgb", "components": [0.6314, 0.6784, 0.7098], "hex": "#a1adb5" } },
         "400": { "$value": { "colorSpace": "srgb", "components": [0.4275, 0.4627, 0.4902], "hex": "#6d767d" } },
         "500": {
-          "default": { "$value": { "colorSpace": "srgb", "components": [0.2549, 0.2784, 0.298], "hex": "#41484c" } },
-          "10": { "$value": { "colorSpace": "srgb", "components": [0.2549, 0.2784, 0.298], "hex": "#41484c", "alpha": 0.1 } },
-          "30": { "$value": { "colorSpace": "srgb", "components": [0.2549, 0.2784, 0.298], "hex": "#41484c", "alpha": 0.3 } },
-          "90": { "$value": { "colorSpace": "srgb", "components": [0.2549, 0.2784, 0.298], "hex": "#41484c", "alpha": 0.9 } }
+          "default": { "$value": { "colorSpace": "srgb", "components": [0.2549, 0.2824, 0.298], "hex": "#41484c" } },
+          "10": { "$value": { "colorSpace": "srgb", "components": [0.2549, 0.2824, 0.298], "hex": "#41484c", "alpha": 0.1 } },
+          "30": { "$value": { "colorSpace": "srgb", "components": [0.2549, 0.2824, 0.298], "hex": "#41484c", "alpha": 0.3 } },
+          "90": { "$value": { "colorSpace": "srgb", "components": [0.2549, 0.2824, 0.298], "hex": "#41484c", "alpha": 0.9 } }
         },
         "600": { "$value": { "colorSpace": "srgb", "components": [0.1765, 0.1922, 0.2039], "hex": "#2d3134" } }
       },
@@ -41,7 +41,7 @@
         "500": { "$value": { "colorSpace": "srgb", "components": [0.3921, 0.1921, 0.4745], "hex": "#643179" } }
       },
       "red": {
-        "400": { "$value": { "colorSpace": "srgb", "components": [0.7843, 0.0196, 0.2157], "hex": "#c80538" } }
+        "400": { "$value": { "colorSpace": "srgb", "components": [0.7843, 0.0196, 0.2196], "hex": "#c80538" } }
       },
       "yellow": {
         "500": { "$value": { "colorSpace": "srgb", "components": [0.9176, 0.7843, 0.0431], "hex": "#eac80b" } }