@openkfw/design-tokens 0.6.1 → 0.6.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (15) hide show
  1. package/demo/dist/css/style.min.css +1 -1
  2. package/demo/src/style.css +11 -11
  3. package/output/css/kfw-design-tokens.light.css +5 -1
  4. package/output/figma/kfw-design-tokens.light.json +20 -0
  5. package/output/js/kfw-design-tokens.d.ts +5 -1
  6. package/output/js/kfw-design-tokens.light.js +5 -1
  7. package/output/json/kfw-design-tokens.json +99 -0
  8. package/output/penpot/kfw-design-tokens.light.json +20 -0
  9. package/output/scss/kfw-design-tokens.light.scss +5 -1
  10. package/output/web_thirdparty_16px/css/kfw-design-tokens.light.css +5 -1
  11. package/output/web_thirdparty_16px/js/kfw-design-tokens.light.js +5 -1
  12. package/output/web_thirdparty_16px/scss/kfw-design-tokens.light.scss +5 -1
  13. package/package.json +2 -2
  14. package/tokens/gen-tokens.dark.json5 +24 -0
  15. package/tokens/tokens.json +13 -0
package/demo/dist/css/style.min.css CHANGED
@@ -1 +1 @@
1
- @layer reset,core,icons,third-party,components,utility;@layer core.tokens,core.base,core.variations;@layer icons.base,icons.classes;@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;-moz-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(:-moz-placeholder){direction:ltr}: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{color-scheme:light}:root,:host{--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 icons.classes{:root,:host{--kfw-icon-alert: url(https://openkfw.github.io/design-tokens/alert-BvmuF3wi..svg);--kfw-icon-arrow-down: url(https://openkfw.github.io/design-tokens/arrow-down-DMHReFrX..svg);--kfw-icon-arrow-left: url(https://openkfw.github.io/design-tokens/arrow-left-CmXJqZbx..svg);--kfw-icon-arrow-right: url(https://openkfw.github.io/design-tokens/arrow-right-BHUQ0fr7..svg);--kfw-icon-arrow-up: url(https://openkfw.github.io/design-tokens/arrow-up-D0cEEOsd..svg);--kfw-icon-bullet-point-empty: url(https://openkfw.github.io/design-tokens/bullet-point-empty-B90fVZ__..svg);--kfw-icon-bullet-point: url(https://openkfw.github.io/design-tokens/bullet-point-Cew9rkS5..svg);--kfw-icon-calendar: url(https://openkfw.github.io/design-tokens/calendar-CfIrOb8V..svg);--kfw-icon-checked: url(https://openkfw.github.io/design-tokens/checked-B010Cryv..svg);--kfw-icon-delete: url(https://openkfw.github.io/design-tokens/delete-Ceo2iidK..svg);--kfw-icon-dialogue: url(https://openkfw.github.io/design-tokens/dialogue-ChyZ0QvQ..svg);--kfw-icon-exclamation-mark-filled: url(https://openkfw.github.io/design-tokens/exclamation-mark-filled-3HC_TKO8..svg);--kfw-icon-home: url(https://openkfw.github.io/design-tokens/home-B0xuhWDK..svg);--kfw-icon-lock: url(https://openkfw.github.io/design-tokens/lock-C4Ud0qa4..svg);--kfw-icon-login: url(https://openkfw.github.io/design-tokens/login-C6gjYtS-..svg);--kfw-icon-personal-settings: url(https://openkfw.github.io/design-tokens/personal-settings-DgRoLJ07..svg);--kfw-icon-plus: url(https://openkfw.github.io/design-tokens/plus-Q9AYGaVx..svg);--kfw-icon-search: url(https://openkfw.github.io/design-tokens/search-CbzHWs1j..svg);--kfw-icon-time: url(https://openkfw.github.io/design-tokens/time-DxJnojn2..svg);--kfw-icon-upload: url(https://openkfw.github.io/design-tokens/upload-BFNAaM7E..svg)}.icon--alert{--icon: var(--kfw-icon-alert)}.icon--arrow-down{--icon: var(--kfw-icon-arrow-down)}.icon--arrow-left{--icon: var(--kfw-icon-arrow-left)}.icon--arrow-right{--icon: var(--kfw-icon-arrow-right)}.icon--arrow-up{--icon: var(--kfw-icon-arrow-up)}.icon--bullet-point-empty{--icon: var(--kfw-icon-bullet-point-empty)}.icon--bullet-point{--icon: var(--kfw-icon-bullet-point)}.icon--calendar{--icon: var(--kfw-icon-calendar)}.icon--checked{--icon: var(--kfw-icon-checked)}.icon--delete{--icon: var(--kfw-icon-delete)}.icon--dialogue{--icon: var(--kfw-icon-dialogue)}.icon--exclamation-mark-filled{--icon: var(--kfw-icon-exclamation-mark-filled)}.icon--home{--icon: var(--kfw-icon-home)}.icon--lock{--icon: var(--kfw-icon-lock)}.icon--login{--icon: var(--kfw-icon-login)}.icon--personal-settings{--icon: var(--kfw-icon-personal-settings)}.icon--plus{--icon: var(--kfw-icon-plus)}.icon--search{--icon: var(--kfw-icon-search)}.icon--time{--icon: var(--kfw-icon-time)}.icon--upload{--icon: var(--kfw-icon-upload)}}@layer icons.base{:root{--icon-size: 1.6rem;--icon-size-lg: 2.4rem;--icon-size-xl: 2.8rem;--icon-size-2xl: 3.2rem;--icon-size-3xl: 4rem}.icon{--size: var(--icon-size);display:inline-block;flex-shrink:0;vertical-align:top;pointer-events:none;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;background-color:currentcolor;-webkit-mask-image:var(--icon);mask-image:var(--icon);min-width:var(--size);min-height:var(--size)}.icon--large{--size: var(--icon-size-lg)}.icon--xlarge{--size: var(--icon-size-xl)}.icon--2xl{--size: var(--icon-size-2xl)}.icon--3xl{--size: var(--icon-size-3xl)}}@layer core{@layer tokens{:root,:host{--kfw-icon-base64-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-base64-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-base64-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='%23000' 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-base64-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='%23000' 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}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)}ul,ol,menu{list-style:none;padding-inline-start:0;font-weight:var(--kfw-fontweight)}ul li ul,ul li ol,ol li ul,ol li ol{margin-block-start:var(--kfw-space-xsmall);padding-inline-start:var(--kfw-space-small)}.list-item{position:relative;margin-block-end:var(--kfw-space-xsmall)}.list-item:before{position:absolute;top:0;left:0;pointer-events:none;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;background-repeat:no-repeat}:where(.list--numbers,.list--letters,.list--caps,.list--icon,.list--big-checks,.list--checks,.list--bullets)>.list-item{padding-inline-start:2rem}:where(.list--numbers,.list--letters,.list--caps,.list--icon,.list--big-checks,.list--checks,.list--bullets)>.list-item:before{content:""}:where(.list--numbers,.list--letters,.list--caps,.list--icon,.list--big-checks,.list--checks,.list--bullets)>.list-item :where(ul,ol){padding-inline-start:0}:where(.list--letters,.list--caps){counter-reset:item}:where(.list--letters,.list--caps) .list-item:before{content:counter(item,lower-latin) ".";counter-increment:item;font-weight:var(--kfw-fontweight-bold)}.list--caps .list-item:before{content:counter(item,upper-latin) "."}.list--numbers{counter-reset:item-counter}.list--numbers>.list-item:before{content:counter(item-counter) ".";counter-increment:item-counter;font-weight:var(--kfw-fontweight-bold)}:where(.list--checks,.list--big-checks)>.list-item{--icon: var(--kfw-icon-checked)}.list--checks>.list-item:before{min-width:var(--icon-size);min-height:var(--icon-size);top:.3rem;-webkit-mask-image:var(--icon);mask-image:var(--icon);background-color:var(--kfw-color-background-dark-green)}.list--big-checks>.list-item{--size: var(--icon-size-xl);--space: 1.5rem;padding-inline-start:calc(var(--size) + var(--space))}.list--big-checks>.list-item:before{min-width:var(--size);min-height:var(--size);top:-.1rem;-webkit-mask-image:var(--icon);mask-image:var(--icon);background-color:var(--kfw-color-background-dark-green)}@media(min-width:1280px){.list--big-checks>.list-item{--size: var(--icon-size-2xl);--space: 1rem}.list--big-checks>.list-item:before{top:-.3rem}}.list--icon>.list-item{--size: var(--icon-size-lg);--space: 1.5rem;--icon: var(--kfw-icon-checked);margin-block-end:var(--kfw-space-small);font-weight:var(--kfw-fontweight-bold);padding-inline-start:calc(var(--size) + var(--space))}.list--icon>.list-item:before{--icon-color: var(--kfw-color-background-dark-green);min-width:var(--size);min-height:var(--size);-webkit-mask-image:var(--icon);mask-image:var(--icon);background-color:var(--icon-color);top:-.1rem}.list--bullets>.list-item{--icon-size: .5rem;padding-inline-start:calc(var(--icon-size) + 10px)}.list--bullets>.list-item:before{min-width:var(--icon-size);min-height:var(--icon-size);top:.8rem;-webkit-mask-image:var(--kfw-icon-bullet-point);mask-image:var(--kfw-icon-bullet-point);background-color:currentcolor}.list--bullets-empty>.list-item:before{-webkit-mask-image:var(--kfw-icon-bullet-point-empty);mask-image:var(--kfw-icon-bullet-point-empty);background-color:currentcolor}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]{-webkit-text-decoration:underline dotted;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)}.form-control{--borderhover: var(--kfw-color-fn-active);--placeholder-color: var(--kfw-color-fn);-webkit-appearance:none;-moz-appearance:none;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);background-repeat:no-repeat}.form-control::-moz-placeholder{color:var(--placeholder-color)}.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-image:var(--kfw-icon-base64-arrow-down-fn)}select.form-control:disabled{background-image:var(--kfw-icon-base64-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)}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){--space-between: .8rem;gap:var(--space-between);display:flex;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)}.invalid-feedback{color:var(--kfw-color-state-danger)}: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]){-webkit-appearance:none;-moz-appearance:none;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-base64-calendar-fn)}[type=time]::-webkit-calendar-picker-indicator{content:var(--kfw-icon-base64-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)}[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;color:var(--kfw-color-fn)}: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}[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{-webkit-appearance:none;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)}.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{color:var(--kfw-color-fn);margin:2rem}: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;-moz-column-gap:var(--kfw-safezone);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;-o-object-fit:cover;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__label{text-wrap:balance;display:block;padding:.5rem;margin-block-end:0}.color-palette__container{text-align:center;padding-inline:var(--kfw-space-xsmall)}.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)}}}@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(.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--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) .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}}
1
+ @layer reset,core,icons,third-party,components,utility;@layer core.tokens,core.base,core.variations;@layer icons.base,icons.classes;@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;-moz-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(:-moz-placeholder){direction:ltr}: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{color-scheme:light}:root,:host{--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-white-bg: #b7f9aa;--kfw-color-text-on-colored-bg: #00375b;--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 icons.classes{:root,:host{--kfw-icon-alert: url(https://openkfw.github.io/design-tokens/alert-BvmuF3wi..svg);--kfw-icon-arrow-down: url(https://openkfw.github.io/design-tokens/arrow-down-Ceu7w_RV..svg);--kfw-icon-arrow-left: url(https://openkfw.github.io/design-tokens/arrow-left-ZwtKKWRt..svg);--kfw-icon-arrow-right: url(https://openkfw.github.io/design-tokens/arrow-right-wTIEklQU..svg);--kfw-icon-arrow-up: url(https://openkfw.github.io/design-tokens/arrow-up-D0cEEOsd..svg);--kfw-icon-bullet-point-empty: url(https://openkfw.github.io/design-tokens/bullet-point-empty-B90fVZ__..svg);--kfw-icon-bullet-point: url(https://openkfw.github.io/design-tokens/bullet-point-Cew9rkS5..svg);--kfw-icon-calendar: url(https://openkfw.github.io/design-tokens/calendar-CqN6n_74..svg);--kfw-icon-checked: url(https://openkfw.github.io/design-tokens/checked-B010Cryv..svg);--kfw-icon-delete: url(https://openkfw.github.io/design-tokens/delete-CNivH4F3..svg);--kfw-icon-dialogue: url(https://openkfw.github.io/design-tokens/dialogue-ChyZ0QvQ..svg);--kfw-icon-exclamation-mark-filled: url(https://openkfw.github.io/design-tokens/exclamation-mark-filled-3HC_TKO8..svg);--kfw-icon-home: url(https://openkfw.github.io/design-tokens/home-B0xuhWDK..svg);--kfw-icon-lock: url(https://openkfw.github.io/design-tokens/lock-C4Ud0qa4..svg);--kfw-icon-login: url(https://openkfw.github.io/design-tokens/login-C6gjYtS-..svg);--kfw-icon-personal-settings: url(https://openkfw.github.io/design-tokens/personal-settings-DgRoLJ07..svg);--kfw-icon-plus: url(https://openkfw.github.io/design-tokens/plus-CAgSDOAi..svg);--kfw-icon-search: url(https://openkfw.github.io/design-tokens/search-CLac7eRx..svg);--kfw-icon-time: url(https://openkfw.github.io/design-tokens/time-IYWcxGTi..svg);--kfw-icon-upload: url(https://openkfw.github.io/design-tokens/upload-C-sIrS6c..svg)}.icon--alert{--icon: var(--kfw-icon-alert)}.icon--arrow-down{--icon: var(--kfw-icon-arrow-down)}.icon--arrow-left{--icon: var(--kfw-icon-arrow-left)}.icon--arrow-right{--icon: var(--kfw-icon-arrow-right)}.icon--arrow-up{--icon: var(--kfw-icon-arrow-up)}.icon--bullet-point-empty{--icon: var(--kfw-icon-bullet-point-empty)}.icon--bullet-point{--icon: var(--kfw-icon-bullet-point)}.icon--calendar{--icon: var(--kfw-icon-calendar)}.icon--checked{--icon: var(--kfw-icon-checked)}.icon--delete{--icon: var(--kfw-icon-delete)}.icon--dialogue{--icon: var(--kfw-icon-dialogue)}.icon--exclamation-mark-filled{--icon: var(--kfw-icon-exclamation-mark-filled)}.icon--home{--icon: var(--kfw-icon-home)}.icon--lock{--icon: var(--kfw-icon-lock)}.icon--login{--icon: var(--kfw-icon-login)}.icon--personal-settings{--icon: var(--kfw-icon-personal-settings)}.icon--plus{--icon: var(--kfw-icon-plus)}.icon--search{--icon: var(--kfw-icon-search)}.icon--time{--icon: var(--kfw-icon-time)}.icon--upload{--icon: var(--kfw-icon-upload)}}@layer icons.base{:root{--icon-size: 1.6rem;--icon-size-lg: 2.4rem;--icon-size-xl: 2.8rem;--icon-size-2xl: 3.2rem;--icon-size-3xl: 4rem}.icon{--size: var(--icon-size);display:inline-block;flex-shrink:0;vertical-align:top;pointer-events:none;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;background-color:currentcolor;-webkit-mask-image:var(--icon);mask-image:var(--icon);min-width:var(--size);min-height:var(--size)}.icon--large{--size: var(--icon-size-lg)}.icon--xlarge{--size: var(--icon-size-xl)}.icon--2xl{--size: var(--icon-size-2xl)}.icon--3xl{--size: var(--icon-size-3xl)}}@layer core{@layer tokens{:root,:host{--kfw-icon-select-disabled: 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-select: 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-input-datepicker: 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='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-input-timepicker: 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='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}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)}ul,ol,menu{list-style:none;padding-inline-start:0;font-weight:var(--kfw-fontweight)}ul li ul,ul li ol,ol li ul,ol li ol{margin-block-start:var(--kfw-space-xsmall);padding-inline-start:var(--kfw-space-small)}.list-item{position:relative;margin-block-end:var(--kfw-space-xsmall)}.list-item:before{position:absolute;top:0;left:0;pointer-events:none;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;background-repeat:no-repeat}:where(.list--numbers,.list--letters,.list--caps,.list--icon,.list--big-checks,.list--checks,.list--bullets)>.list-item{padding-inline-start:2rem}:where(.list--numbers,.list--letters,.list--caps,.list--icon,.list--big-checks,.list--checks,.list--bullets)>.list-item:before{content:""}:where(.list--numbers,.list--letters,.list--caps,.list--icon,.list--big-checks,.list--checks,.list--bullets)>.list-item :where(ul,ol){padding-inline-start:0}:where(.list--letters,.list--caps){counter-reset:item}:where(.list--letters,.list--caps) .list-item:before{content:counter(item,lower-latin) ".";counter-increment:item;font-weight:var(--kfw-fontweight-bold)}.list--caps .list-item:before{content:counter(item,upper-latin) "."}.list--numbers{counter-reset:item-counter}.list--numbers>.list-item:before{content:counter(item-counter) ".";counter-increment:item-counter;font-weight:var(--kfw-fontweight-bold)}:where(.list--checks,.list--big-checks)>.list-item{--icon: var(--kfw-icon-checked)}.list--checks>.list-item:before{min-width:var(--icon-size);min-height:var(--icon-size);top:.3rem;-webkit-mask-image:var(--icon);mask-image:var(--icon);background-color:var(--kfw-color-background-dark-green)}.list--big-checks>.list-item{--size: var(--icon-size-xl);--space: 1.5rem;padding-inline-start:calc(var(--size) + var(--space))}.list--big-checks>.list-item:before{min-width:var(--size);min-height:var(--size);top:-.1rem;-webkit-mask-image:var(--icon);mask-image:var(--icon);background-color:var(--kfw-color-background-dark-green)}@media(min-width:1280px){.list--big-checks>.list-item{--size: var(--icon-size-2xl);--space: 1rem}.list--big-checks>.list-item:before{top:-.3rem}}.list--icon>.list-item{--size: var(--icon-size-lg);--space: 1.5rem;--icon: var(--kfw-icon-checked);margin-block-end:var(--kfw-space-small);font-weight:var(--kfw-fontweight-bold);padding-inline-start:calc(var(--size) + var(--space))}.list--icon>.list-item:before{--icon-color: var(--kfw-color-background-dark-green);min-width:var(--size);min-height:var(--size);-webkit-mask-image:var(--icon);mask-image:var(--icon);background-color:var(--icon-color);top:-.1rem}.list--bullets>.list-item{--icon-size: .7rem;padding-inline-start:calc(var(--icon-size) + 1rem)}.list--bullets>.list-item:before{min-width:var(--icon-size);min-height:var(--icon-size);top:.8rem;-webkit-mask-image:var(--kfw-icon-bullet-point);mask-image:var(--kfw-icon-bullet-point);background-color:currentcolor}.list--bullets-empty>.list-item:before{-webkit-mask-image:var(--kfw-icon-bullet-point-empty);mask-image:var(--kfw-icon-bullet-point-empty);background-color:currentcolor}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]{-webkit-text-decoration:underline dotted;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)}.form-control{--borderhover: var(--kfw-color-fn-active);--placeholder-color: var(--kfw-color-fn);-webkit-appearance:none;-moz-appearance:none;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);background-repeat:no-repeat}.form-control::-moz-placeholder{color:var(--placeholder-color)}.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-image:var(--kfw-icon-select)}select.form-control:disabled{background-image:var(--kfw-icon-select-disabled)}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)}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){--space-between: .8rem;gap:var(--space-between);display:flex;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)}.invalid-feedback{color:var(--kfw-color-state-danger)}: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]){-webkit-appearance:none;-moz-appearance:none;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-input-datepicker)}[type=time]::-webkit-calendar-picker-indicator{content:var(--kfw-icon-input-timepicker)}: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)}[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;color:var(--kfw-color-fn)}: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}[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{-webkit-appearance:none;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)}.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{color:var(--kfw-color-fn);margin:2rem}: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;-moz-column-gap:var(--kfw-safezone);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;-o-object-fit:cover;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__label{text-wrap:balance;display:block;padding:.5rem;margin-block-end:0}.color-palette__container{text-align:center;padding-inline:var(--kfw-space-xsmall)}.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)}}}@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(.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--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) .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/src/style.css CHANGED
@@ -63,11 +63,11 @@
63
63
  @layer tokens {
64
64
  :root,
65
65
  :host {
66
- /* Base64 icons, used for elements without their own element or pseudo-elements (::before, ::after) like <select>, <input> */
67
- --kfw-icon-base64-arrow-down: svg-load("icons/arrow-down.svg", "var(--kfw-color-text)");
68
- --kfw-icon-base64-arrow-down-fn: svg-load("icons/arrow-down.svg", "var(--kfw-color-fn)");
69
- --kfw-icon-base64-calendar-fn: svg-load("icons/calendar.svg", "var(--kfw-color-fn)");
70
- --kfw-icon-base64-time-fn: svg-load("icons/time.svg", "var(--kfw-color-fn)");
66
+ /* Base64 icons for mask-image workaround on elements without pseudo-elements (::before, ::after), e.g., <select>, <input> */
67
+ --kfw-icon-select-disabled: svg-load("icons/arrow-down.svg", "var(--kfw-color-text)");
68
+ --kfw-icon-select: svg-load("icons/arrow-down.svg", "var(--kfw-color-fn)");
69
+ --kfw-icon-input-datepicker: svg-load("icons/calendar.svg", "var(--kfw-color-fn)");
70
+ --kfw-icon-input-timepicker: svg-load("icons/time.svg", "var(--kfw-color-fn)");
71
71
 
72
72
  /* fluid shorthands */
73
73
  --kfw-safezone: clamp(var(--kfw-safezone-min), var(--kfw-safezone-val), var(--kfw-safezone-max));
@@ -283,9 +283,9 @@
283
283
 
284
284
  /* Bullet Lists */
285
285
  .list--bullets > .list-item {
286
- --icon-size: 0.5rem;
286
+ --icon-size: 0.7rem;
287
287
 
288
- padding-inline-start: calc(var(--icon-size) + 10px);
288
+ padding-inline-start: calc(var(--icon-size) + 1rem);
289
289
  }
290
290
 
291
291
  .list--bullets > .list-item::before {
@@ -539,11 +539,11 @@
539
539
  padding-block: 0;
540
540
  background-position: center right 1.5rem;
541
541
  background-size: 2.4rem auto;
542
- background-image: var(--kfw-icon-base64-arrow-down-fn);
542
+ background-image: var(--kfw-icon-select);
543
543
  }
544
544
 
545
545
  select.form-control:disabled {
546
- background-image: var(--kfw-icon-base64-arrow-down);
546
+ background-image: var(--kfw-icon-select-disabled);
547
547
  }
548
548
 
549
549
  textarea.form-control {
@@ -751,11 +751,11 @@
751
751
  }
752
752
 
753
753
  [type="date"]::-webkit-calendar-picker-indicator {
754
- content: var(--kfw-icon-base64-calendar-fn);
754
+ content: var(--kfw-icon-input-datepicker);
755
755
  }
756
756
 
757
757
  [type="time"]::-webkit-calendar-picker-indicator {
758
- content: var(--kfw-icon-base64-time-fn);
758
+ content: var(--kfw-icon-input-timepicker);
759
759
  }
760
760
 
761
761
  :where(a:not([role="button"]), [role="link"]) {
package/output/css/kfw-design-tokens.light.css CHANGED
@@ -1,5 +1,5 @@
1
1
  /**
2
- * KfW Design Tokens v0.6.1 | MPL-2.0 | https://github.com/openkfw/design-tokens
2
+ * KfW Design Tokens v0.6.3 | MPL-2.0 | https://github.com/openkfw/design-tokens
3
3
  */
4
4
 
5
5
  :root, :host { color-scheme: light; }
@@ -123,6 +123,8 @@
123
123
  --kfw-base-borderwidth-lg: 2px;
124
124
  --kfw-base-fontweight-regular: 400;
125
125
  --kfw-base-fontweight-medium: 500;
126
+ --kfw-base-wordspacing-normal: 0;
127
+ --kfw-base-wordspacing-wide: 1.6px;
126
128
  --kfw-base-letterspacing-tight: -0.5px;
127
129
  --kfw-base-letterspacing-normal: 0;
128
130
  --kfw-base-letterspacing-wide: 0.5px;
@@ -241,6 +243,7 @@
241
243
  --kfw-fontsize-heading-5: 1.8rem;
242
244
  --kfw-fontsize-heading-6: 1.6rem;
243
245
  --kfw-lineheight: 1.4;
246
+ --kfw-lineheight-lightspeech: 1.5;
244
247
  --kfw-lineheight-list: 1.5;
245
248
  --kfw-lineheight-heading: 1.3;
246
249
  --kfw-lineheight-heading-5: 1.333;
@@ -256,6 +259,7 @@
256
259
  --kfw-focusring-outline-style: dashed;
257
260
  --kfw-fontweight: 400;
258
261
  --kfw-fontweight-bold: 500;
262
+ --kfw-wordspacing-lightspeech: 1.6px;
259
263
  --kfw-breakpoint-mobile: 600px;
260
264
  --kfw-breakpoint-tablet: 840px;
261
265
  --kfw-breakpoint-desktop: 960px;
package/output/figma/kfw-design-tokens.light.json CHANGED
@@ -288,6 +288,16 @@
288
288
  "$type": "fontWeights"
289
289
  }
290
290
  },
291
+ "Wordspacing": {
292
+ "Normal": {
293
+ "$value": "0px",
294
+ "$type": "dimension"
295
+ },
296
+ "Wide": {
297
+ "$value": "1.6px",
298
+ "$type": "dimension"
299
+ }
300
+ },
291
301
  "Letterspacing": {
292
302
  "Tight": {
293
303
  "$value": "-0.5px",
@@ -669,6 +679,10 @@
669
679
  "$value": "140%",
670
680
  "$type": "lineHeights"
671
681
  },
682
+ "Lightspeech": {
683
+ "$value": "150%",
684
+ "$type": "lineHeights"
685
+ },
672
686
  "List": {
673
687
  "$value": "150%",
674
688
  "$type": "lineHeights"
@@ -723,6 +737,12 @@
723
737
  "$value": 500,
724
738
  "$type": "fontWeights"
725
739
  }
740
+ },
741
+ "Wordspacing": {
742
+ "Lightspeech": {
743
+ "$value": "1.6px",
744
+ "$type": "dimension"
745
+ }
726
746
  }
727
747
  },
728
748
  "$metadata": {
package/output/js/kfw-design-tokens.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  /**
2
- * KfW Design Tokens v0.6.1 | MPL-2.0 | https://github.com/openkfw/design-tokens
2
+ * KfW Design Tokens v0.6.3 | MPL-2.0 | https://github.com/openkfw/design-tokens
3
3
  */
4
4
 
5
5
  export const KfwBaseColorBlue100: {
@@ -237,6 +237,8 @@ export const KfwBaseBorderwidthMd: string;
237
237
  export const KfwBaseBorderwidthLg: string;
238
238
  export const KfwBaseFontweightRegular: number;
239
239
  export const KfwBaseFontweightMedium: number;
240
+ export const KfwBaseWordspacingNormal: string;
241
+ export const KfwBaseWordspacingWide: string;
240
242
  export const KfwBaseLetterspacingTight: string;
241
243
  export const KfwBaseLetterspacingNormal: string;
242
244
  export const KfwBaseLetterspacingWide: string;
@@ -563,6 +565,7 @@ export const KfwFontsizeHeading4Val: string;
563
565
  export const KfwFontsizeHeading5: string;
564
566
  export const KfwFontsizeHeading6: string;
565
567
  export const KfwLineheight: number;
568
+ export const KfwLineheightLightspeech: number;
566
569
  export const KfwLineheightList: number;
567
570
  export const KfwLineheightHeading: number;
568
571
  export const KfwLineheightHeading5: number;
@@ -578,6 +581,7 @@ export const KfwFocusringOutlineOffset: string;
578
581
  export const KfwFocusringOutlineStyle: string;
579
582
  export const KfwFontweight: number;
580
583
  export const KfwFontweightBold: number;
584
+ export const KfwWordspacingLightspeech: string;
581
585
  export const KfwBreakpointMobile: string;
582
586
  export const KfwBreakpointTablet: string;
583
587
  export const KfwBreakpointDesktop: string;
package/output/js/kfw-design-tokens.light.js CHANGED
@@ -1,5 +1,5 @@
1
1
  /**
2
- * KfW Design Tokens v0.6.1 | MPL-2.0 | https://github.com/openkfw/design-tokens
2
+ * KfW Design Tokens v0.6.3 | MPL-2.0 | https://github.com/openkfw/design-tokens
3
3
  */
4
4
 
5
5
  export const KfwBaseColorBlue100 = {
@@ -239,6 +239,8 @@ export const KfwBaseBorderwidthMd = "1px";
239
239
  export const KfwBaseBorderwidthLg = "2px";
240
240
  export const KfwBaseFontweightRegular = 400;
241
241
  export const KfwBaseFontweightMedium = 500;
242
+ export const KfwBaseWordspacingNormal = "0";
243
+ export const KfwBaseWordspacingWide = "1.6px";
242
244
  export const KfwBaseLetterspacingTight = "-0.5px";
243
245
  export const KfwBaseLetterspacingNormal = "0";
244
246
  export const KfwBaseLetterspacingWide = "0.5px";
@@ -544,6 +546,7 @@ export const KfwFontsizeHeading4Val = "0.294vi + 1.8235rem";
544
546
  export const KfwFontsizeHeading5 = "1.8rem";
545
547
  export const KfwFontsizeHeading6 = "1.6rem";
546
548
  export const KfwLineheight = 1.4;
549
+ export const KfwLineheightLightspeech = 1.5;
547
550
  export const KfwLineheightList = 1.5;
548
551
  export const KfwLineheightHeading = 1.3;
549
552
  export const KfwLineheightHeading5 = 1.333;
@@ -559,6 +562,7 @@ export const KfwFocusringOutlineOffset = "2px";
559
562
  export const KfwFocusringOutlineStyle = "dashed";
560
563
  export const KfwFontweight = 400;
561
564
  export const KfwFontweightBold = 500;
565
+ export const KfwWordspacingLightspeech = "1.6px";
562
566
  export const KfwBreakpointMobile = "600px";
563
567
  export const KfwBreakpointTablet = "840px";
564
568
  export const KfwBreakpointDesktop = "960px";
package/output/json/kfw-design-tokens.json CHANGED
@@ -3637,6 +3637,58 @@
3637
3637
  ]
3638
3638
  }
3639
3639
  },
3640
+ "wordspacing": {
3641
+ "normal": {
3642
+ "key": "{base.wordspacing.normal}",
3643
+ "$value": {
3644
+ "unit": "px",
3645
+ "value": 0
3646
+ },
3647
+ "filePath": "tokens/tokens.json",
3648
+ "isSource": true,
3649
+ "$type": "dimension",
3650
+ "original": {
3651
+ "$value": {
3652
+ "unit": "px",
3653
+ "value": 0
3654
+ },
3655
+ "$type": "dimension",
3656
+ "key": "{base.wordspacing.normal}"
3657
+ },
3658
+ "name": "normal",
3659
+ "attributes": {},
3660
+ "path": [
3661
+ "base",
3662
+ "wordspacing",
3663
+ "normal"
3664
+ ]
3665
+ },
3666
+ "wide": {
3667
+ "key": "{base.wordspacing.wide}",
3668
+ "$value": {
3669
+ "unit": "px",
3670
+ "value": 1.6
3671
+ },
3672
+ "filePath": "tokens/tokens.json",
3673
+ "isSource": true,
3674
+ "$type": "dimension",
3675
+ "original": {
3676
+ "$value": {
3677
+ "unit": "px",
3678
+ "value": 1.6
3679
+ },
3680
+ "$type": "dimension",
3681
+ "key": "{base.wordspacing.wide}"
3682
+ },
3683
+ "name": "wide",
3684
+ "attributes": {},
3685
+ "path": [
3686
+ "base",
3687
+ "wordspacing",
3688
+ "wide"
3689
+ ]
3690
+ }
3691
+ },
3640
3692
  "letterspacing": {
3641
3693
  "tight": {
3642
3694
  "key": "{base.letterspacing.tight}",
@@ -6999,6 +7051,29 @@
6999
7051
  "default"
7000
7052
  ]
7001
7053
  },
7054
+ "lightspeech": {
7055
+ "key": "{semantic.lineheight.lightspeech}",
7056
+ "$value": 1.5,
7057
+ "filePath": "tokens/tokens.json",
7058
+ "isSource": true,
7059
+ "$type": "number",
7060
+ "original": {
7061
+ "$value": "{base.lineheight.lg}",
7062
+ "$type": "number",
7063
+ "key": "{semantic.lineheight.lightspeech}"
7064
+ },
7065
+ "name": "kfw-lineheight-lightspeech",
7066
+ "attributes": {
7067
+ "category": "semantic",
7068
+ "type": "lineheight",
7069
+ "item": "lightspeech"
7070
+ },
7071
+ "path": [
7072
+ "semantic",
7073
+ "lineheight",
7074
+ "lightspeech"
7075
+ ]
7076
+ },
7002
7077
  "list": {
7003
7078
  "key": "{semantic.lineheight.list}",
7004
7079
  "$value": 1.5,
@@ -7343,6 +7418,30 @@
7343
7418
  ]
7344
7419
  }
7345
7420
  },
7421
+ "wordspacing": {
7422
+ "lightspeech": {
7423
+ "key": "{semantic.wordspacing.lightspeech}",
7424
+ "$value": {
7425
+ "unit": "px",
7426
+ "value": 1.6
7427
+ },
7428
+ "filePath": "tokens/tokens.json",
7429
+ "isSource": true,
7430
+ "$type": "dimension",
7431
+ "original": {
7432
+ "$value": "{base.wordspacing.wide}",
7433
+ "$type": "dimension",
7434
+ "key": "{semantic.wordspacing.lightspeech}"
7435
+ },
7436
+ "name": "lightspeech",
7437
+ "attributes": {},
7438
+ "path": [
7439
+ "semantic",
7440
+ "wordspacing",
7441
+ "lightspeech"
7442
+ ]
7443
+ }
7444
+ },
7346
7445
  "breakpoint": {
7347
7446
  "mobile": {
7348
7447
  "key": "{semantic.breakpoint.mobile}",
package/output/penpot/kfw-design-tokens.light.json CHANGED
@@ -288,6 +288,16 @@
288
288
  "$type": "fontWeights"
289
289
  }
290
290
  },
291
+ "Wordspacing": {
292
+ "Normal": {
293
+ "$value": "0px",
294
+ "$type": "dimension"
295
+ },
296
+ "Wide": {
297
+ "$value": "1.6px",
298
+ "$type": "dimension"
299
+ }
300
+ },
291
301
  "Letterspacing": {
292
302
  "Tight": {
293
303
  "$value": "-0.5px",
@@ -669,6 +679,10 @@
669
679
  "$value": "140%",
670
680
  "$type": "lineHeights"
671
681
  },
682
+ "Lightspeech": {
683
+ "$value": "150%",
684
+ "$type": "lineHeights"
685
+ },
672
686
  "List": {
673
687
  "$value": "150%",
674
688
  "$type": "lineHeights"
@@ -723,6 +737,12 @@
723
737
  "$value": 500,
724
738
  "$type": "fontWeights"
725
739
  }
740
+ },
741
+ "Wordspacing": {
742
+ "Lightspeech": {
743
+ "$value": "1.6px",
744
+ "$type": "dimension"
745
+ }
726
746
  }
727
747
  },
728
748
  "$metadata": {
package/output/scss/kfw-design-tokens.light.scss CHANGED
@@ -1,5 +1,5 @@
1
1
 
2
- // KfW Design Tokens v0.6.1 | MPL-2.0 | https://github.com/openkfw/design-tokens
2
+ // KfW Design Tokens v0.6.3 | MPL-2.0 | https://github.com/openkfw/design-tokens
3
3
 
4
4
  $kfw-base-color-blue-100: #e9f5fb;
5
5
  $kfw-base-color-blue-400: #54b3e2;
@@ -119,6 +119,8 @@ $kfw-base-borderwidth-md: 1px;
119
119
  $kfw-base-borderwidth-lg: 2px;
120
120
  $kfw-base-fontweight-regular: 400;
121
121
  $kfw-base-fontweight-medium: 500;
122
+ $kfw-base-wordspacing-normal: 0;
123
+ $kfw-base-wordspacing-wide: 1.6px;
122
124
  $kfw-base-letterspacing-tight: -0.5px;
123
125
  $kfw-base-letterspacing-normal: 0;
124
126
  $kfw-base-letterspacing-wide: 0.5px;
@@ -237,6 +239,7 @@ $kfw-fontsize-heading-4-val: 0.294vi + 1.8235rem;
237
239
  $kfw-fontsize-heading-5: 1.8rem;
238
240
  $kfw-fontsize-heading-6: 1.6rem;
239
241
  $kfw-lineheight: 1.4;
242
+ $kfw-lineheight-lightspeech: 1.5;
240
243
  $kfw-lineheight-list: 1.5;
241
244
  $kfw-lineheight-heading: 1.3;
242
245
  $kfw-lineheight-heading-5: 1.333;
@@ -252,6 +255,7 @@ $kfw-focusring-outline-offset: 2px;
252
255
  $kfw-focusring-outline-style: dashed;
253
256
  $kfw-fontweight: 400;
254
257
  $kfw-fontweight-bold: 500;
258
+ $kfw-wordspacing-lightspeech: 1.6px;
255
259
  $kfw-breakpoint-mobile: 600px;
256
260
  $kfw-breakpoint-tablet: 840px;
257
261
  $kfw-breakpoint-desktop: 960px;
package/output/web_thirdparty_16px/css/kfw-design-tokens.light.css CHANGED
@@ -1,5 +1,5 @@
1
1
  /**
2
- * KfW Design Tokens v0.6.1 | MPL-2.0 | https://github.com/openkfw/design-tokens
2
+ * KfW Design Tokens v0.6.3 | MPL-2.0 | https://github.com/openkfw/design-tokens
3
3
  */
4
4
 
5
5
  :root, :host { color-scheme: light; }
@@ -123,6 +123,8 @@
123
123
  --kfw-base-borderwidth-lg: 2px;
124
124
  --kfw-base-fontweight-regular: 400;
125
125
  --kfw-base-fontweight-medium: 500;
126
+ --kfw-base-wordspacing-normal: 0;
127
+ --kfw-base-wordspacing-wide: 1.6px;
126
128
  --kfw-base-letterspacing-tight: -0.5px;
127
129
  --kfw-base-letterspacing-normal: 0;
128
130
  --kfw-base-letterspacing-wide: 0.5px;
@@ -241,6 +243,7 @@
241
243
  --kfw-fontsize-heading-5: 1.125rem;
242
244
  --kfw-fontsize-heading-6: 1rem;
243
245
  --kfw-lineheight: 1.4;
246
+ --kfw-lineheight-lightspeech: 1.5;
244
247
  --kfw-lineheight-list: 1.5;
245
248
  --kfw-lineheight-heading: 1.3;
246
249
  --kfw-lineheight-heading-5: 1.333;
@@ -256,6 +259,7 @@
256
259
  --kfw-focusring-outline-style: dashed;
257
260
  --kfw-fontweight: 400;
258
261
  --kfw-fontweight-bold: 500;
262
+ --kfw-wordspacing-lightspeech: 1.6px;
259
263
  --kfw-breakpoint-mobile: 600px;
260
264
  --kfw-breakpoint-tablet: 840px;
261
265
  --kfw-breakpoint-desktop: 960px;
package/output/web_thirdparty_16px/js/kfw-design-tokens.light.js CHANGED
@@ -1,5 +1,5 @@
1
1
  /**
2
- * KfW Design Tokens v0.6.1 | MPL-2.0 | https://github.com/openkfw/design-tokens
2
+ * KfW Design Tokens v0.6.3 | MPL-2.0 | https://github.com/openkfw/design-tokens
3
3
  */
4
4
 
5
5
  export const KfwBaseColorBlue100 = {
@@ -239,6 +239,8 @@ export const KfwBaseBorderwidthMd = "1px";
239
239
  export const KfwBaseBorderwidthLg = "2px";
240
240
  export const KfwBaseFontweightRegular = 400;
241
241
  export const KfwBaseFontweightMedium = 500;
242
+ export const KfwBaseWordspacingNormal = "0";
243
+ export const KfwBaseWordspacingWide = "1.6px";
242
244
  export const KfwBaseLetterspacingTight = "-0.5px";
243
245
  export const KfwBaseLetterspacingNormal = "0";
244
246
  export const KfwBaseLetterspacingWide = "0.5px";
@@ -544,6 +546,7 @@ export const KfwFontsizeHeading4Val = "0.294vi + 1.1396875rem";
544
546
  export const KfwFontsizeHeading5 = "1.125rem";
545
547
  export const KfwFontsizeHeading6 = "1rem";
546
548
  export const KfwLineheight = 1.4;
549
+ export const KfwLineheightLightspeech = 1.5;
547
550
  export const KfwLineheightList = 1.5;
548
551
  export const KfwLineheightHeading = 1.3;
549
552
  export const KfwLineheightHeading5 = 1.333;
@@ -559,6 +562,7 @@ export const KfwFocusringOutlineOffset = "2px";
559
562
  export const KfwFocusringOutlineStyle = "dashed";
560
563
  export const KfwFontweight = 400;
561
564
  export const KfwFontweightBold = 500;
565
+ export const KfwWordspacingLightspeech = "1.6px";
562
566
  export const KfwBreakpointMobile = "600px";
563
567
  export const KfwBreakpointTablet = "840px";
564
568
  export const KfwBreakpointDesktop = "960px";
package/output/web_thirdparty_16px/scss/kfw-design-tokens.light.scss CHANGED
@@ -1,5 +1,5 @@
1
1
 
2
- // KfW Design Tokens v0.6.1 | MPL-2.0 | https://github.com/openkfw/design-tokens
2
+ // KfW Design Tokens v0.6.3 | MPL-2.0 | https://github.com/openkfw/design-tokens
3
3
 
4
4
  $kfw-base-color-blue-100: #e9f5fb;
5
5
  $kfw-base-color-blue-400: #54b3e2;
@@ -119,6 +119,8 @@ $kfw-base-borderwidth-md: 1px;
119
119
  $kfw-base-borderwidth-lg: 2px;
120
120
  $kfw-base-fontweight-regular: 400;
121
121
  $kfw-base-fontweight-medium: 500;
122
+ $kfw-base-wordspacing-normal: 0;
123
+ $kfw-base-wordspacing-wide: 1.6px;
122
124
  $kfw-base-letterspacing-tight: -0.5px;
123
125
  $kfw-base-letterspacing-normal: 0;
124
126
  $kfw-base-letterspacing-wide: 0.5px;
@@ -237,6 +239,7 @@ $kfw-fontsize-heading-4-val: 0.294vi + 1.1396875rem;
237
239
  $kfw-fontsize-heading-5: 1.125rem;
238
240
  $kfw-fontsize-heading-6: 1rem;
239
241
  $kfw-lineheight: 1.4;
242
+ $kfw-lineheight-lightspeech: 1.5;
240
243
  $kfw-lineheight-list: 1.5;
241
244
  $kfw-lineheight-heading: 1.3;
242
245
  $kfw-lineheight-heading-5: 1.333;
@@ -252,6 +255,7 @@ $kfw-focusring-outline-offset: 2px;
252
255
  $kfw-focusring-outline-style: dashed;
253
256
  $kfw-fontweight: 400;
254
257
  $kfw-fontweight-bold: 500;
258
+ $kfw-wordspacing-lightspeech: 1.6px;
255
259
  $kfw-breakpoint-mobile: 600px;
256
260
  $kfw-breakpoint-tablet: 840px;
257
261
  $kfw-breakpoint-desktop: 960px;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@openkfw/design-tokens",
3
- "version": "0.6.1",
3
+ "version": "0.6.3",
4
4
  "description": "The source of truth for KfW-branded digital products.",
5
5
  "files": [
6
6
  "README.md",
@@ -52,7 +52,7 @@
52
52
  "jsoneditor-cli": "^1.1.0",
53
53
  "lodash": "4.17.21",
54
54
  "prettier": "^3.7.4",
55
- "style-dictionary": "^5.1.1",
55
+ "style-dictionary": "^5.1.3",
56
56
  "style-dictionary-utils": "^6.0.1",
57
57
  "tsx": "^4.21.0",
58
58
  "typescript": "^5.9.3",
package/tokens/gen-tokens.dark.json5 CHANGED
@@ -883,6 +883,21 @@
883
883
  $value: 500,
884
884
  },
885
885
  },
886
+ wordspacing: {
887
+ $type: "dimension",
888
+ normal: {
889
+ $value: {
890
+ unit: "px",
891
+ value: 0,
892
+ },
893
+ },
894
+ wide: {
895
+ $value: {
896
+ unit: "px",
897
+ value: 1.6,
898
+ },
899
+ },
900
+ },
886
901
  letterspacing: {
887
902
  $type: "dimension",
888
903
  tight: {
@@ -1409,6 +1424,9 @@
1409
1424
  default: {
1410
1425
  $value: "{base.lineheight.md}",
1411
1426
  },
1427
+ lightspeech: {
1428
+ $value: "{base.lineheight.lg}",
1429
+ },
1412
1430
  list: {
1413
1431
  $value: "{base.lineheight.lg}",
1414
1432
  },
@@ -1470,6 +1488,12 @@
1470
1488
  $value: "{base.fontweight.medium}",
1471
1489
  },
1472
1490
  },
1491
+ wordspacing: {
1492
+ $type: "dimension",
1493
+ lightspeech: {
1494
+ $value: "{base.wordspacing.wide}",
1495
+ },
1496
+ },
1473
1497
  breakpoint: {
1474
1498
  $type: "dimension",
1475
1499
  mobile: {
package/tokens/tokens.json CHANGED
@@ -205,6 +205,11 @@
205
205
  "regular": { "$value": 400 },
206
206
  "medium": { "$value": 500 }
207
207
  },
208
+ "wordspacing": {
209
+ "$type": "dimension",
210
+ "normal": { "$value": { "unit": "px", "value": 0 } },
211
+ "wide": { "$value": { "unit": "px", "value": 1.6 } }
212
+ },
208
213
  "letterspacing": {
209
214
  "$type": "dimension",
210
215
  "tight": { "$value": { "unit": "px", "value": -0.5 } },
@@ -405,6 +410,7 @@
405
410
  "lineheight": {
406
411
  "$type": "number",
407
412
  "default": { "$value": "{base.lineheight.md}" },
413
+ "lightspeech": { "$value": "{base.lineheight.lg}" },
408
414
  "list": { "$value": "{base.lineheight.lg}" },
409
415
  "heading": { "$value": "{base.lineheight.xs}" },
410
416
  "heading-5": { "$value": "{base.lineheight.sm}" }
@@ -427,6 +433,7 @@
427
433
  "outline-offset": { "$type": "dimension", "$value": "{base.borderwidth.lg}" },
428
434
  "outline-style": { "$type": "strokeStyle", "$value": "dashed" }
429
435
  },
436
+
430
437
  "fontweight": {
431
438
  "$type": "fontWeight",
432
439
  "default": {
@@ -436,6 +443,12 @@
436
443
  "$value": "{base.fontweight.medium}"
437
444
  }
438
445
  },
446
+ "wordspacing": {
447
+ "$type": "dimension",
448
+ "lightspeech": {
449
+ "$value": "{base.wordspacing.wide}"
450
+ }
451
+ },
439
452
  "breakpoint": {
440
453
  "$type": "dimension",
441
454
  "mobile": { "$value": "{base.layout.breakpoint.sm}" },