@openkfw/design-tokens 0.5.4 → 0.5.6

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 (17) hide show
  1. package/LICENSE +1 -3
  2. package/README.md +1 -3
  3. package/demo/dist/css/style.min.css +1 -1
  4. package/demo/scripts/build-custom-media.js +38 -0
  5. package/demo/scripts/postcss.color-to-filter.js +66 -0
  6. package/demo/scripts/postcss.svg-load-plugin.js +96 -0
  7. package/demo/src/style.css +306 -191
  8. package/demo/src/vendor/gen-custom-media.css +1 -1
  9. package/output/css/kfw-design-tokens.light.css +1 -1
  10. package/output/js/kfw-design-tokens.light.d.ts +1 -1
  11. package/output/js/kfw-design-tokens.light.js +1 -1
  12. package/output/scss/kfw-design-tokens.light.scss +1 -1
  13. package/output/web_thirdparty_16px/css/kfw-design-tokens.light.css +1 -1
  14. package/output/web_thirdparty_16px/js/kfw-design-tokens.light.d.ts +1 -1
  15. package/output/web_thirdparty_16px/js/kfw-design-tokens.light.js +1 -1
  16. package/output/web_thirdparty_16px/scss/kfw-design-tokens.light.scss +1 -1
  17. package/package.json +8 -7
package/LICENSE CHANGED
@@ -1,6 +1,6 @@
1
1
  Copyright (c) 2025 KfW Bankengruppe
2
2
 
3
- Only the source code in this repository is licensed under the Mozilla Public License 2.0 (MPL-2.0).
3
+ The source code in this repository is licensed under the Mozilla Public License 2.0 (MPL-2.0).
4
4
  All KfW brand assets, including logos, icons, images, fonts, and design documentation, are excluded and remain the property of KfW Bankengruppe.
5
5
  These materials may not be used, copied, or redistributed without prior written permission.
6
6
 
@@ -11,8 +11,6 @@ Excluded brand-related materials include:
11
11
  - brand and design documentation
12
12
  - all files under /demo directory
13
13
 
14
- Note: KfW may update this licensing agreement at any time. This notice and permission must be included in all copies or substantial portions of the Software.)*
15
-
16
14
  Mozilla Public License Version 2.0
17
15
  ==================================
18
16
 
package/README.md CHANGED
@@ -49,7 +49,7 @@ Considering supporting with your contribution? Whether you like to contribute ne
49
49
 
50
50
  Copyright (c) 2025 KfW Bankengruppe
51
51
 
52
- Only the source code in this repository is licensed under the **Mozilla Public License 2.0 (MPL-2.0)**.
52
+ The source code in this repository is licensed under the **Mozilla Public License 2.0 (MPL-2.0)**.
53
53
  All KfW brand assets, including logos, icons, images, fonts, and design documentation, are **excluded** and remain the property of KfW Bankengruppe.
54
54
  These materials may not be used, copied, or redistributed without prior written permission.
55
55
 
@@ -62,8 +62,6 @@ Excluded brand-related materials include:
62
62
 
63
63
  See the full MPL-2.0 license in [LICENSE](./LICENSE).
64
64
 
65
- _(Note: KfW may update this licensing agreement at any time. This notice and permission must be included in all copies or substantial portions of the Software.)_
66
-
67
65
  ## 💁 FAQ
68
66
 
69
67
  ### How to use fluid typography with design tokens?
package/demo/dist/css/style.min.css CHANGED
@@ -1 +1 @@
1
- @layer core,third-party,components,utility;@layer core.reset,core.tokens,core.base;@layer third-party.imports,third-party.overrides;@layer components.base,components.variations;@layer core.reset{*,*:after,*:before{box-sizing:border-box}:focus-visible{outline-offset:3px}:where(html){-webkit-text-size-adjust:none;text-size-adjust:none}:where(html){line-height:1.5}:where(html){scrollbar-gutter:stable}:where(h1){font-size:2em;margin-block:.67em}:where(abbr[title]){cursor:help;text-decoration-line:underline;text-decoration-style:dotted}@media(forced-colors:active){mark{color:HighlightText;background-color:Highlight}}:where(del,ins,s):before,:where(del,ins,s):after{clip-path:inset(100%);clip:rect(1px,1px,1px,1px);height:1px;width:1px;overflow:hidden;position:absolute;white-space:nowrap;content:"test"}:where(s):before{content:"stricken text start "}:where(s):after{content:" stricken text end"}:where(del):before{content:"deletion start "}:where(del):after{content:" deletion end"}:where(ins):before{content:"insertion start "}:where(ins):after{content:" insertion end"}:where(audio,iframe,img,svg,video){max-block-size:100%;max-inline-size:100%}:where(fieldset){min-inline-size:0}:where(label):has(+:where(textarea,input,select)){display:block}:where(textarea:not([rows])){min-block-size:6em}:where(button,input,select,textarea){font-family:inherit;font-size:inherit}:where([type=search]){-webkit-appearance:textfield}@supports (-webkit-touch-callout: none){:where([type=search]){border:1px solid -apple-system-secondary-label;background-color:canvas}}:where([type=tel],[type=url],[type=email],[type=number]):not(:placeholder-shown){direction:ltr}:where(table){border-collapse:collapse;border:1px solid}:where(th,td){border:1px solid;padding:.25em .5em}:where(dialog)::backdrop{background:#0000004d}:where(dialog),:where(dialog)::backdrop{opacity:0;transition:opacity .3s ease-out,display .3s allow-discrete,overlay .3s allow-discrete}:where(dialog[open]),:where(dialog[open])::backdrop{opacity:1}@starting-style{:where(dialog[open]),:where(dialog[open])::backdrop{opacity:0}}[hidden]:not([hidden=until-found]){display:none!important}}@layer core.tokens{:root,:host,.kfw-theme--light{color-scheme:light}:root,:host,.kfw-theme--light{--kfw-base-color-blue-100: #e9f5fb;--kfw-base-color-blue-400: #54b3e2;--kfw-base-color-blue-500: #007abc;--kfw-base-color-blue-600: #005a8c;--kfw-base-color-blue-700: #00446e;--kfw-base-color-blue-800: #00375b;--kfw-base-color-green-100: #ecfded;--kfw-base-color-green-300: #b7f9aa;--kfw-base-color-green-400: #94eb90;--kfw-base-color-green-700: #398357;--kfw-base-color-white-90: #ffffffe6;--kfw-base-color-white-95: #fffffff2;--kfw-base-color-white: #ffffff;--kfw-base-color-black: #000000;--kfw-base-color-gray-50: #f6f7f8;--kfw-base-color-gray-100: #eef0f2;--kfw-base-color-gray-200: #d8dfe3;--kfw-base-color-gray-300: #a1adb5;--kfw-base-color-gray-400: #6d767d;--kfw-base-color-gray-500-10: #41484c1a;--kfw-base-color-gray-500-30: #41484c4d;--kfw-base-color-gray-500-90: #41484ce6;--kfw-base-color-gray-500: #41484c;--kfw-base-color-gray-600: #2d3134;--kfw-base-color-violet-400: #9598e0;--kfw-base-color-violet-500: #686fc8;--kfw-base-color-red-400: #c80538;--kfw-base-color-yellow-500: #eac80b;--kfw-base-fontfamily-sans: "KfW Centro Sans", Arial, "Helvetica Neue", Helvetica, sans-serif;--kfw-base-fontfamily-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;--kfw-base-space-static-5: .5rem;--kfw-base-space-static-10: 1rem;--kfw-base-space-static-15: 1.5rem;--kfw-base-space-static-20: 2rem;--kfw-base-space-static-25: 2.5rem;--kfw-base-space-static-30: 3rem;--kfw-base-space-static-35: 3.5rem;--kfw-base-space-static-40: 4rem;--kfw-base-space-static-50: 5rem;--kfw-base-space-static-60: 6rem;--kfw-base-space-fluid-5-min: .5rem;--kfw-base-space-fluid-5-max: 1rem;--kfw-base-space-fluid-5-val: .735vi + .588px;--kfw-base-space-fluid-10-min: 1rem;--kfw-base-space-fluid-10-max: 1.5rem;--kfw-base-space-fluid-10-val: .735vi + .5588rem;--kfw-base-space-fluid-15-min: 1.5rem;--kfw-base-space-fluid-15-max: 2rem;--kfw-base-space-fluid-15-val: .735vi + 1.0588rem;--kfw-base-space-fluid-20-min: 2rem;--kfw-base-space-fluid-20-max: 2.5rem;--kfw-base-space-fluid-20-val: .735vi + 1.5588rem;--kfw-base-space-fluid-25-min: 2.5rem;--kfw-base-space-fluid-25-max: 3rem;--kfw-base-space-fluid-25-val: .735vi + 2.0588rem;--kfw-base-space-fluid-30-min: 3rem;--kfw-base-space-fluid-30-max: 3.5rem;--kfw-base-space-fluid-30-val: .735vi + 2.5588rem;--kfw-base-space-fluid-35-min: 3.5rem;--kfw-base-space-fluid-35-max: 4rem;--kfw-base-space-fluid-35-val: .735vi + 3.0588rem;--kfw-base-space-fluid-40-min: 4rem;--kfw-base-space-fluid-40-max: 5rem;--kfw-base-space-fluid-40-val: 1.471vi + 3.1176rem;--kfw-base-space-fluid-50-min: 5rem;--kfw-base-space-fluid-50-max: 6rem;--kfw-base-space-fluid-50-val: 1.471vi + 4.1176rem;--kfw-base-fontsize-static-sm: 1.4rem;--kfw-base-fontsize-static-md: 1.6rem;--kfw-base-fontsize-static-lg: 1.8rem;--kfw-base-fontsize-static-xl: 2rem;--kfw-base-fontsize-static-2xl: 2.2rem;--kfw-base-fontsize-static-3xl: 2.4rem;--kfw-base-fontsize-static-4xl: 2.6rem;--kfw-base-fontsize-static-5xl: 2.8rem;--kfw-base-fontsize-static-6xl: 3rem;--kfw-base-fontsize-static-7xl: 3.2rem;--kfw-base-fontsize-static-8xl: 3.6rem;--kfw-base-fontsize-fluid-sm-min: 1.4rem;--kfw-base-fontsize-fluid-sm-max: 1.6rem;--kfw-base-fontsize-fluid-sm-val: .294vi + 1.2235rem;--kfw-base-fontsize-fluid-md-min: 1.6rem;--kfw-base-fontsize-fluid-md-max: 1.8rem;--kfw-base-fontsize-fluid-md-val: .294vi + 1.4235rem;--kfw-base-fontsize-fluid-lg-min: 1.8rem;--kfw-base-fontsize-fluid-lg-max: 2rem;--kfw-base-fontsize-fluid-lg-val: .294vi + 1.6235rem;--kfw-base-fontsize-fluid-xl-min: 2rem;--kfw-base-fontsize-fluid-xl-max: 2.2rem;--kfw-base-fontsize-fluid-xl-val: .294vi + 1.8235rem;--kfw-base-fontsize-fluid-2xl-min: 2.2rem;--kfw-base-fontsize-fluid-2xl-max: 2.4rem;--kfw-base-fontsize-fluid-2xl-val: .294vi + 2.0235rem;--kfw-base-fontsize-fluid-3xl-min: 2.4rem;--kfw-base-fontsize-fluid-3xl-max: 2.6rem;--kfw-base-fontsize-fluid-3xl-val: .294vi + 2.2235rem;--kfw-base-fontsize-fluid-4xl-min: 2.6rem;--kfw-base-fontsize-fluid-4xl-max: 2.8rem;--kfw-base-fontsize-fluid-4xl-val: .294vi + 2.4234999999999998rem;--kfw-base-fontsize-fluid-5xl-min: 2.8rem;--kfw-base-fontsize-fluid-5xl-max: 3.2rem;--kfw-base-fontsize-fluid-5xl-val: .588vi + 2.4471rem;--kfw-base-fontsize-fluid-6xl-min: 3rem;--kfw-base-fontsize-fluid-6xl-max: 3.6rem;--kfw-base-fontsize-fluid-6xl-val: .882vi + 2.4706rem;--kfw-base-lineheight-2xs: 1.2;--kfw-base-lineheight-xs: 1.3;--kfw-base-lineheight-sm: 1.333;--kfw-base-lineheight-md: 1.4;--kfw-base-lineheight-lg: 1.5;--kfw-base-borderradius-sm: 2px;--kfw-base-borderradius-md: .4rem;--kfw-base-borderradius-lg: 2rem;--kfw-base-borderradius-circle: 999.9rem;--kfw-base-borderwidth-md: 1px;--kfw-base-borderwidth-lg: 2px;--kfw-base-fontweight-regular: 400;--kfw-base-fontweight-medium: 500;--kfw-base-letterspacing-tight: -.5px;--kfw-base-letterspacing-normal: 0;--kfw-base-letterspacing-wide: .5px;--kfw-base-letterspacing-wider: 1px;--kfw-base-layout-breakpoint-xs: 320px;--kfw-base-layout-breakpoint-sm: 600px;--kfw-base-layout-breakpoint-md: 840px;--kfw-base-layout-breakpoint-lg: 960px;--kfw-base-layout-breakpoint-xl: 1280px;--kfw-base-layout-container-sm: 89.6rem;--kfw-base-layout-container-md: 108rem;--kfw-base-layout-container-lg: 128rem;--kfw-base-layout-safezone-static-md: 2rem;--kfw-base-layout-safezone-static-lg: 4rem;--kfw-base-layout-safezone-fluid-min: 2rem;--kfw-base-layout-safezone-fluid-max: 4rem;--kfw-base-layout-safezone-fluid-val: 2.941vi + .2353rem;--kfw-base-layout-gridcolumn-1: 1;--kfw-base-layout-gridcolumn-2: 2;--kfw-base-layout-gridcolumn-3: 3;--kfw-base-layout-gridcolumn-4: 4;--kfw-base-layout-gridcolumn-6: 6;--kfw-base-layout-gridcolumn-8: 8;--kfw-base-layout-gridcolumn-12: 12;--kfw-base-layout-gridgap-static-xs: 1.2rem;--kfw-base-layout-gridgap-static-sm: 1.8rem;--kfw-base-layout-gridgap-static-md: 2.2rem;--kfw-base-layout-gridgap-static-lg: 2.6rem;--kfw-base-layout-gridgap-static-xl: 3.6rem;--kfw-base-layout-gridgap-fluid-min: 1.2rem;--kfw-base-layout-gridgap-fluid-max: 3.6rem;--kfw-base-layout-gridgap-fluid-val: 3.529vi - .9176rem;--kfw-color-fn: #005a8c;--kfw-color-fn-active: #00446e;--kfw-color-fn-inactive: #a1adb5;--kfw-color-fn-border: #2d3134;--kfw-color-fn-label: #2d3134;--kfw-color-text: #2d3134;--kfw-color-text-on-dark-bg: #ffffff;--kfw-color-text-on-disabled: #ffffff;--kfw-color-text-headline-on-dark-bg: #b7f9aa;--kfw-color-background: #ffffff;--kfw-color-background-subtle: #f6f7f8;--kfw-color-background-disabled: #a1adb5;--kfw-color-background-light-blue: #e9f5fb;--kfw-color-background-light-green: #ecfded;--kfw-color-background-dark-blue: #00375b;--kfw-color-background-dark-green: #398357;--kfw-color-opaque-white-90: #ffffffe6;--kfw-color-opaque-white-95: #fffffff2;--kfw-color-opaque-gray-500-10: #41484c1a;--kfw-color-opaque-gray-500-30: #41484c4d;--kfw-color-opaque-gray-500-90: #41484ce6;--kfw-color-state-danger: #c80538;--kfw-color-state-success: #398357;--kfw-color-state-warning: #9598e0;--kfw-color-status-red: #c80538;--kfw-color-status-yellow: #eac80b;--kfw-color-status-green: #398357;--kfw-color-line-6: #00446e;--kfw-color-line-7: #2d3134;--kfw-color-line-8: #a1adb5;--kfw-color-line-9: #005a8c;--kfw-color-line-10: #2d3134;--kfw-color-line-11: #b7f9aa;--kfw-color-line-12: #a1adb5;--kfw-color-product-container: #f6f7f8;--kfw-color-product-benefit: #007abc;--kfw-color-product-credit: #398357;--kfw-color-product-cooperation: #686fc8;--kfw-color-product-credit-benefit: #41484c;--kfw-color-icon: #005a8c;--kfw-color-icon-secondary: #54b3e2;--kfw-color-icon-disabled: #398357;--kfw-color-icon-disabled-secondary: #94eb90;--kfw-fontfamily: "KfW Centro Sans", Arial, "Helvetica Neue", Helvetica, sans-serif;--kfw-fontfamily-code: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;--kfw-space-xsmall: 1rem;--kfw-space-small: 2rem;--kfw-space-medium: 3rem;--kfw-space-large-min: 3.5rem;--kfw-space-large-max: 4rem;--kfw-space-large-val: .735vi + 3.0588rem;--kfw-space-big-min: 5rem;--kfw-space-big-max: 6rem;--kfw-space-big-val: 1.471vi + 4.1176rem;--kfw-fontspace: 2rem;--kfw-fontspace-2xsmall: .5rem;--kfw-fontspace-xsmall: 1rem;--kfw-fontspace-small: 1.5rem;--kfw-fontspace-large: 3rem;--kfw-fontspace-heading-1: 2rem;--kfw-fontspace-heading-2: 2rem;--kfw-fontspace-heading-3: 1rem;--kfw-fontspace-heading-4: 1rem;--kfw-fontspace-heading-5: 1rem;--kfw-fontspace-heading-6: 1rem;--kfw-fontsize: 1.6rem;--kfw-fontsize-introduction: 2rem;--kfw-fontsize-large: 1.8rem;--kfw-fontsize-small: 1.4rem;--kfw-fontsize-heading-1-min: 3rem;--kfw-fontsize-heading-1-max: 3.6rem;--kfw-fontsize-heading-1-val: .882vi + 2.4706rem;--kfw-fontsize-heading-2-min: 2.8rem;--kfw-fontsize-heading-2-max: 3.2rem;--kfw-fontsize-heading-2-val: .588vi + 2.4471rem;--kfw-fontsize-heading-3-min: 2.4rem;--kfw-fontsize-heading-3-max: 2.6rem;--kfw-fontsize-heading-3-val: .294vi + 2.2235rem;--kfw-fontsize-heading-4-min: 2rem;--kfw-fontsize-heading-4-max: 2.2rem;--kfw-fontsize-heading-4-val: .294vi + 1.8235rem;--kfw-fontsize-heading-5: 1.8rem;--kfw-fontsize-heading-6: 1.6rem;--kfw-lineheight: 1.4;--kfw-lineheight-list: 1.5;--kfw-lineheight-heading: 1.3;--kfw-lineheight-heading-5: 1.333;--kfw-borderradius: .4rem;--kfw-borderradius-large: 2rem;--kfw-borderradius-small: 2px;--kfw-borderradius-circle: 999.9rem;--kfw-borderwidth: 1px;--kfw-borderwidth-large: 2px;--kfw-focusring-outline-width: 2px;--kfw-focusring-outline-offset: 2px;--kfw-focusring-outline-style: dashed;--kfw-fontweight: 400;--kfw-fontweight-bold: 500;--kfw-breakpoint-mobile: 600px;--kfw-breakpoint-tablet: 840px;--kfw-breakpoint-desktop: 960px;--kfw-breakpoint-desktop-large: 1280px;--kfw-contentwrapper-narrow: 89.6rem;--kfw-contentwrapper-basic: 108rem;--kfw-contentwrapper-extended: 128rem;--kfw-safezone-min: 2rem;--kfw-safezone-max: 4rem;--kfw-safezone-val: 2.941vi + .2353rem}}@layer core.tokens;@layer core{@layer tokens{:root{--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%}:is(sub,sup){position:relative;line-height:0;vertical-align:baseline;font-size:75%}sub{bottom:-.25em}sup{top:-.5em}:is(address,blockquote,dl,ol,p,pre,table,ul){margin-block:0 var(--kfw-fontspace)}:is(address,blockquote,dl,ol,p,pre,table,ul):last-child{margin-block-end:0}ul,ol,menu{list-style:none inside none;padding-inline-start:0}mark{padding:.125rem .25rem;vertical-align:baseline;background-color:var(--kfw-color-background-dark-blue);color:var(--kfw-color-text-on-dark-bg)}blockquote{margin-inline:0}blockquote footer{margin-block-start:var(--kfw-fontspace-2xsmall)}table{width:100%;border-collapse:collapse;border-spacing:0;border-left:0;border-right:0;text-indent:0;overflow:visible;border-top:var(--kfw-borderwidth) solid var(--kfw-color-line-10);border-bottom:var(--kfw-borderwidth-large) solid var(--kfw-color-line-7)}tr{background-color:var(--kfw-color-background)}thead tr{border-bottom:var(--kfw-borderwidth) solid var(--kfw-color-line-8)}tr:not(:last-of-type){border-bottom:var(--kfw-borderwidth) solid var(--kfw-color-line-8)}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}:where(audio,canvas,iframe,img,svg,video){vertical-align:middle}audio,video{display:inline-block}:where(iframe){border-style:none}img,video{max-width:100%;height:auto;border-style:none}figure{display:block;margin:0;padding:0}figure figcaption{padding:var(--kfw-space-xsmall)}code,kbd,samp,pre{font-family:var(--kfw-fontfamily-code);line-height:initial}pre{display:block;margin-block:0 var(--kfw-fontspace);overflow:auto;-ms-overflow-style:scrollbar}abbr[title]{text-decoration:underline dotted;cursor:help}ins{color:var(--kfw-color-state-success);text-decoration:none}del{color:var(--kfw-color-state-danger)}:is(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)}: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)}a:not([role=button]):where(:hover,:focus,:active,[aria-current]:not([aria-current=false])),[role=link]:where(:hover,:focus,:active,[aria-current]:not([aria-current=false])){color:var(--link-color-hover);text-decoration:underline}a[role=button]{display:inline-block}.form-control{--borderhover: var(--kfw-color-fn-active);--placeholder-color: var(--kfw-color-fn);appearance:none;width:100%;height:4.3rem;font-size:var(--kfw-fontsize);font-family:inherit;line-height:var(--kfw-lineheight);color:var(--kfw-color-fn);border-radius:var(--kfw-borderradius);margin-block-start:0;border:var(--kfw-borderwidth) solid var(--kfw-base-color-gray-500);padding-inline:1.5rem;padding-block:1rem;background-color:var(--kfw-color-background)}.form-control::placeholder{color:var(--placeholder-color)}.form-control:disabled{--placeholder-color: var(--kfw-color-text);background-color:transparent;color:var(--kfw-color-text);border-color:var(--kfw-color-fn-inactive)}.form-control:hover:not(:disabled){box-shadow:0 0 0 var(--kfw-borderwidth) var(--borderhover)}:is([type=checkbox],[type=radio],select.form-control):not(:disabled){cursor:pointer}select.form-control{padding-block:0}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)}:is(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}[type=file],[type=range]{padding:0;border:0;width:100%}[type=file]::file-selector-button{margin-inline-end:var(--kfw-space-xsmall)}:where(input,select,textarea,fieldset)+small,.form-text,.invalid-feedback{display:block;width:100%;margin-block-start:.8rem;font-size:var(--kfw-fontsize-small);line-height:var(--kfw-lineheight);letter-spacing:var(--kfw-base-letterspacing-normal)}.invalid-feedback{color:var(--kfw-color-state-danger)}:is(label,.form-label){display:inline-block;margin-block-end:.8rem;font-weight:var(--kfw-fontweight-bold);color:var(--kfw-color-text)}:is([type=checkbox],[type=radio]){appearance:none;width:var(--field-size);height:var(--field-size);margin:0;border:var(--kfw-borderwidth) solid var(--kfw-color-fn-active);color:var(--kfw-color-fn-active);vertical-align:middle;position:relative;display:flex;align-items:center;flex-shrink:0;justify-content:center;background-color:var(--kfw-color-background)}:is([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)}[type=radio]{border-radius:var(--kfw-borderradius-circle)}[type=checkbox]{border-radius:var(--kfw-borderradius)}:is([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)}:is([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}[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}[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}:is([type=checkbox],[type=radio]):checked:before{content:""}:is([type=radio],[type=checkbox]):hover:not(:disabled),:is([type=radio],[type=checkbox]):focus:not(:disabled){border-width:var(--kfw-borderwidth-large)}.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--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}}button,[type=submit],[type=reset],[type=button],[type=file]::file-selector-button,[role=button]{border:var(--kfw-borderwidth) solid transparent;font-family:var(--kfw-fontfamily);font-size:var(--kfw-fontsize);font-weight:var(--kfw-fontweight);border-radius:var(--kfw-borderradius);display:inline-flex;gap:.8rem;text-align:center;text-decoration:none;line-height:var(--kfw-lineheight);padding:1.2rem 2.5rem;justify-content:center;max-width:100%;vertical-align:middle;white-space:nowrap;cursor:pointer}.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)}.button--primary:is(: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,:is([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:is(:hover,:focus),:is([type=reset],.button--secondary):is(:hover,:focus){color:var(--button-color-hover);background-color:var(--button-bg-hover);border-color:var(--button-border-color-hover);text-decoration:underline}.button--tertiary{--button-color: var(--kfw-color-fn);--button-bg: transparent;--button-color-hover: var(--kfw-color-fn-active);background-color:var(--button-bg);color:var(--button-color);padding:0;border:0;text-decoration:none}.button--tertiary:is(: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]) :is(input:not([type=submit],[type=button],[type=reset]),select,textarea){pointer-events:none}.file-upload{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);margin-block-end:var(--kfw-space-medium)}.file-upload__title{margin-block-end:var(--kfw-space-medium);font-weight:var(--kfw-fontweight);text-align:center}.file-upload__input{width:auto;max-width:100%}.file-upload--with-native-input .file-upload__input{display:none}.file-upload--with-native-input .file-upload__input--has-files{display:block}.file-upload--with-native-input:has(.file-upload__input--has-files) :is(button,[role=button]){display:none}.file-upload__icon{position:relative;display:block;transform:scale(1);width:2.8rem;height:1.3rem;border:.3rem solid var(--kfw-color-fn);border-top:0;margin-block:2.5rem 2rem}.file-upload__icon:before,.file-upload__icon:after{content:"";display:block;position:absolute}.file-upload__icon:before{left:1rem;bottom:.4rem;width:.3rem;height:1.9rem;background-color:var(--kfw-color-fn)}.file-upload__icon:after{bottom:.7rem;left:.35rem;width:1.6rem;height:1.6rem;transform:rotate(45deg);border-left:.3rem solid var(--kfw-color-fn);border-top:.3rem solid var(--kfw-color-fn)}.file-upload-table{margin-top:var(--kfw-space-medium)}.file-upload-table table{border-top:0;min-height:10px;min-width:500px}.file-upload-table .invalid-feedback{margin-block-start:0}.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)}.file-upload-table tr:not(:last-of-type){border-bottom:0}@media(min-width:600px){.file-upload-table tr{--size: 25%;--action: 25%}}@media(min-width:960px){.file-upload-table tr{--action: 20%}}:is(.container,.container-fluid,.container-narrow,.container-extended,.container-extended-fullwidth){margin-inline:auto;width:100%}:is(.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,.file-upload-table{overflow:auto}}}@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 img{width:auto}.header__menu{text-align:end}.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 :is(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);background-color:var(--kfw-color-background-dark-blue);color:var(--kfw-color-text-on-dark-bg);font-size:var(--kfw-fontsize-small);line-height:var(--kfw-lineheight);padding-block:var(--kfw-space-medium) var(--kfw-space-large)}.footer .button--secondary{--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)}.footer :where(a:not([role=button])),.footer [role=link]{--link-color: var(--kfw-color-text-on-dark-bg);--link-color-hover: var(--kfw-color-text-on-dark-bg);text-decoration:underline}.footer a:not([role=button]):where(:hover,:focus,:active,[aria-current]:not([aria-current=false])),.footer [role=link]:where(:hover,:focus,:active,[aria-current]:not([aria-current=false])){text-decoration:none}.footer>*{align-items:baseline;display:flex;flex-direction:column;gap:var(--kfw-space-medium);justify-content:space-between}@media(min-width:960px){.footer>*{gap:3.6rem;flex-direction:row}}.footer__copyright{flex-shrink:0}.footer__list{list-style:none;padding:0;margin:0;display:flex;flex-flow:row wrap;max-width:100%;gap:1.6rem var(--kfw-space-large)}.grid{display:grid;grid-template-columns:1fr;column-gap:var(--kfw-safezone);margin-block-end:var(--kfw-fontspace)}@media(min-width:840px){.grid{grid-template-columns:repeat(auto-fit,minmax(0,1fr));margin-block-end:0}}.hero{--hero-content-desktop-width: 42.9rem}.hero>*{position:relative}.hero__bars{display:block;width:100%}@media(min-width:960px){.hero__bars{width:var(--hero-content-desktop-width);position:absolute;top:4rem;left:4rem;bottom:4rem}}.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:960px){.hero__title{flex-direction:row;position:absolute;display:flex;width:var(--hero-content-desktop-width);background-color:var(--kfw-color-opaque-white-95);left:4rem;top:calc(5rem + 25px);border-radius:0 0 var(--kfw-borderradius-large) 0;padding:2rem 3rem 3rem}}.hero__image{width:100%;margin-inline:auto;display:block;object-fit:cover;height:auto;max-width:128rem}}@layer variations{.bg-dark{--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)}.bg-dark :where(a:not([role=button])),.bg-dark [role=link]{--link-color: var(--kfw-color-text-on-dark-bg);--link-color-hover: var(--kfw-color-text-on-dark-bg);text-decoration:underline}.bg-dark :where(a:not([role=button])):is([aria-current]:not([aria-current=false]),:hover,:active,:focus),.bg-dark [role=link]:is([aria-current]:not([aria-current=false]),:hover,:active,:focus){text-decoration:none}.bg-dark .button--primary{--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)}.bg-dark .button--secondary{--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)}.bg-dark .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-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)}}
1
+ @layer reset,core,third-party,components,utility;@layer core.tokens,core.base,core.variations;@layer third-party.imports,third-party.overrides;@layer components.base,components.variations;@layer reset{*,*:after,*:before{box-sizing:border-box}:focus-visible{outline-offset:3px}:where(html){-webkit-text-size-adjust:none;text-size-adjust:none}:where(html){line-height:1.5}:where(html){scrollbar-gutter:stable}:where(h1){font-size:2em;margin-block:.67em}:where(abbr[title]){cursor:help;text-decoration-line:underline;text-decoration-style:dotted}@media(forced-colors:active){mark{color:HighlightText;background-color:Highlight}}:where(del,ins,s):before,:where(del,ins,s):after{clip-path:inset(100%);clip:rect(1px,1px,1px,1px);height:1px;width:1px;overflow:hidden;position:absolute;white-space:nowrap;content:"test"}:where(s):before{content:"stricken text start "}:where(s):after{content:" stricken text end"}:where(del):before{content:"deletion start "}:where(del):after{content:" deletion end"}:where(ins):before{content:"insertion start "}:where(ins):after{content:" insertion end"}:where(audio,iframe,img,svg,video){max-block-size:100%;max-inline-size:100%}:where(fieldset){min-inline-size:0}:where(label):has(+:where(textarea,input,select)){display:block}:where(textarea:not([rows])){min-block-size:6em}:where(button,input,select,textarea){font-family:inherit;font-size:inherit}:where([type=search]){-webkit-appearance:textfield}@supports (-webkit-touch-callout: none){:where([type=search]){border:1px solid -apple-system-secondary-label;background-color:canvas}}:where([type=tel],[type=url],[type=email],[type=number]):not(:placeholder-shown){direction:ltr}:where(table){border-collapse:collapse;border:1px solid}:where(th,td){border:1px solid;padding:.25em .5em}:where(dialog)::backdrop{background:#0000004d}:where(dialog),:where(dialog)::backdrop{opacity:0;transition:opacity .3s ease-out,display .3s allow-discrete,overlay .3s allow-discrete}:where(dialog[open]),:where(dialog[open])::backdrop{opacity:1}@starting-style{:where(dialog[open]),:where(dialog[open])::backdrop{opacity:0}}[hidden]:not([hidden=until-found]){display:none!important}}@layer core.tokens{:root,:host,.kfw-theme--light{color-scheme:light}:root,:host,.kfw-theme--light{--kfw-base-color-blue-100: #e9f5fb;--kfw-base-color-blue-400: #54b3e2;--kfw-base-color-blue-500: #007abc;--kfw-base-color-blue-600: #005a8c;--kfw-base-color-blue-700: #00446e;--kfw-base-color-blue-800: #00375b;--kfw-base-color-green-100: #ecfded;--kfw-base-color-green-300: #b7f9aa;--kfw-base-color-green-400: #94eb90;--kfw-base-color-green-700: #398357;--kfw-base-color-white-90: #ffffffe6;--kfw-base-color-white-95: #fffffff2;--kfw-base-color-white: #ffffff;--kfw-base-color-black: #000000;--kfw-base-color-gray-50: #f6f7f8;--kfw-base-color-gray-100: #eef0f2;--kfw-base-color-gray-200: #d8dfe3;--kfw-base-color-gray-300: #a1adb5;--kfw-base-color-gray-400: #6d767d;--kfw-base-color-gray-500-10: #41484c1a;--kfw-base-color-gray-500-30: #41484c4d;--kfw-base-color-gray-500-90: #41484ce6;--kfw-base-color-gray-500: #41484c;--kfw-base-color-gray-600: #2d3134;--kfw-base-color-violet-400: #9598e0;--kfw-base-color-violet-500: #686fc8;--kfw-base-color-red-400: #c80538;--kfw-base-color-yellow-500: #eac80b;--kfw-base-fontfamily-sans: "KfW Centro Sans", Arial, "Helvetica Neue", Helvetica, sans-serif;--kfw-base-fontfamily-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;--kfw-base-space-static-5: .5rem;--kfw-base-space-static-10: 1rem;--kfw-base-space-static-15: 1.5rem;--kfw-base-space-static-20: 2rem;--kfw-base-space-static-25: 2.5rem;--kfw-base-space-static-30: 3rem;--kfw-base-space-static-35: 3.5rem;--kfw-base-space-static-40: 4rem;--kfw-base-space-static-50: 5rem;--kfw-base-space-static-60: 6rem;--kfw-base-space-fluid-5-min: .5rem;--kfw-base-space-fluid-5-max: 1rem;--kfw-base-space-fluid-5-val: .735vi + .588px;--kfw-base-space-fluid-10-min: 1rem;--kfw-base-space-fluid-10-max: 1.5rem;--kfw-base-space-fluid-10-val: .735vi + .5588rem;--kfw-base-space-fluid-15-min: 1.5rem;--kfw-base-space-fluid-15-max: 2rem;--kfw-base-space-fluid-15-val: .735vi + 1.0588rem;--kfw-base-space-fluid-20-min: 2rem;--kfw-base-space-fluid-20-max: 2.5rem;--kfw-base-space-fluid-20-val: .735vi + 1.5588rem;--kfw-base-space-fluid-25-min: 2.5rem;--kfw-base-space-fluid-25-max: 3rem;--kfw-base-space-fluid-25-val: .735vi + 2.0588rem;--kfw-base-space-fluid-30-min: 3rem;--kfw-base-space-fluid-30-max: 3.5rem;--kfw-base-space-fluid-30-val: .735vi + 2.5588rem;--kfw-base-space-fluid-35-min: 3.5rem;--kfw-base-space-fluid-35-max: 4rem;--kfw-base-space-fluid-35-val: .735vi + 3.0588rem;--kfw-base-space-fluid-40-min: 4rem;--kfw-base-space-fluid-40-max: 5rem;--kfw-base-space-fluid-40-val: 1.471vi + 3.1176rem;--kfw-base-space-fluid-50-min: 5rem;--kfw-base-space-fluid-50-max: 6rem;--kfw-base-space-fluid-50-val: 1.471vi + 4.1176rem;--kfw-base-fontsize-static-sm: 1.4rem;--kfw-base-fontsize-static-md: 1.6rem;--kfw-base-fontsize-static-lg: 1.8rem;--kfw-base-fontsize-static-xl: 2rem;--kfw-base-fontsize-static-2xl: 2.2rem;--kfw-base-fontsize-static-3xl: 2.4rem;--kfw-base-fontsize-static-4xl: 2.6rem;--kfw-base-fontsize-static-5xl: 2.8rem;--kfw-base-fontsize-static-6xl: 3rem;--kfw-base-fontsize-static-7xl: 3.2rem;--kfw-base-fontsize-static-8xl: 3.6rem;--kfw-base-fontsize-fluid-sm-min: 1.4rem;--kfw-base-fontsize-fluid-sm-max: 1.6rem;--kfw-base-fontsize-fluid-sm-val: .294vi + 1.2235rem;--kfw-base-fontsize-fluid-md-min: 1.6rem;--kfw-base-fontsize-fluid-md-max: 1.8rem;--kfw-base-fontsize-fluid-md-val: .294vi + 1.4235rem;--kfw-base-fontsize-fluid-lg-min: 1.8rem;--kfw-base-fontsize-fluid-lg-max: 2rem;--kfw-base-fontsize-fluid-lg-val: .294vi + 1.6235rem;--kfw-base-fontsize-fluid-xl-min: 2rem;--kfw-base-fontsize-fluid-xl-max: 2.2rem;--kfw-base-fontsize-fluid-xl-val: .294vi + 1.8235rem;--kfw-base-fontsize-fluid-2xl-min: 2.2rem;--kfw-base-fontsize-fluid-2xl-max: 2.4rem;--kfw-base-fontsize-fluid-2xl-val: .294vi + 2.0235rem;--kfw-base-fontsize-fluid-3xl-min: 2.4rem;--kfw-base-fontsize-fluid-3xl-max: 2.6rem;--kfw-base-fontsize-fluid-3xl-val: .294vi + 2.2235rem;--kfw-base-fontsize-fluid-4xl-min: 2.6rem;--kfw-base-fontsize-fluid-4xl-max: 2.8rem;--kfw-base-fontsize-fluid-4xl-val: .294vi + 2.4234999999999998rem;--kfw-base-fontsize-fluid-5xl-min: 2.8rem;--kfw-base-fontsize-fluid-5xl-max: 3.2rem;--kfw-base-fontsize-fluid-5xl-val: .588vi + 2.4471rem;--kfw-base-fontsize-fluid-6xl-min: 3rem;--kfw-base-fontsize-fluid-6xl-max: 3.6rem;--kfw-base-fontsize-fluid-6xl-val: .882vi + 2.4706rem;--kfw-base-lineheight-2xs: 1.2;--kfw-base-lineheight-xs: 1.3;--kfw-base-lineheight-sm: 1.333;--kfw-base-lineheight-md: 1.4;--kfw-base-lineheight-lg: 1.5;--kfw-base-borderradius-sm: 2px;--kfw-base-borderradius-md: .4rem;--kfw-base-borderradius-lg: 2rem;--kfw-base-borderradius-circle: 999.9rem;--kfw-base-borderwidth-md: 1px;--kfw-base-borderwidth-lg: 2px;--kfw-base-fontweight-regular: 400;--kfw-base-fontweight-medium: 500;--kfw-base-letterspacing-tight: -.5px;--kfw-base-letterspacing-normal: 0;--kfw-base-letterspacing-wide: .5px;--kfw-base-letterspacing-wider: 1px;--kfw-base-layout-breakpoint-xs: 320px;--kfw-base-layout-breakpoint-sm: 600px;--kfw-base-layout-breakpoint-md: 840px;--kfw-base-layout-breakpoint-lg: 960px;--kfw-base-layout-breakpoint-xl: 1280px;--kfw-base-layout-container-sm: 89.6rem;--kfw-base-layout-container-md: 108rem;--kfw-base-layout-container-lg: 128rem;--kfw-base-layout-safezone-static-md: 2rem;--kfw-base-layout-safezone-static-lg: 4rem;--kfw-base-layout-safezone-fluid-min: 2rem;--kfw-base-layout-safezone-fluid-max: 4rem;--kfw-base-layout-safezone-fluid-val: 2.941vi + .2353rem;--kfw-base-layout-gridcolumn-1: 1;--kfw-base-layout-gridcolumn-2: 2;--kfw-base-layout-gridcolumn-3: 3;--kfw-base-layout-gridcolumn-4: 4;--kfw-base-layout-gridcolumn-6: 6;--kfw-base-layout-gridcolumn-8: 8;--kfw-base-layout-gridcolumn-12: 12;--kfw-base-layout-gridgap-static-xs: 1.2rem;--kfw-base-layout-gridgap-static-sm: 1.8rem;--kfw-base-layout-gridgap-static-md: 2.2rem;--kfw-base-layout-gridgap-static-lg: 2.6rem;--kfw-base-layout-gridgap-static-xl: 3.6rem;--kfw-base-layout-gridgap-fluid-min: 1.2rem;--kfw-base-layout-gridgap-fluid-max: 3.6rem;--kfw-base-layout-gridgap-fluid-val: 3.529vi - .9176rem;--kfw-color-fn: #005a8c;--kfw-color-fn-active: #00446e;--kfw-color-fn-inactive: #a1adb5;--kfw-color-fn-border: #2d3134;--kfw-color-fn-label: #2d3134;--kfw-color-text: #2d3134;--kfw-color-text-on-dark-bg: #ffffff;--kfw-color-text-on-disabled: #ffffff;--kfw-color-text-headline-on-dark-bg: #b7f9aa;--kfw-color-background: #ffffff;--kfw-color-background-subtle: #f6f7f8;--kfw-color-background-disabled: #a1adb5;--kfw-color-background-light-blue: #e9f5fb;--kfw-color-background-light-green: #ecfded;--kfw-color-background-dark-blue: #00375b;--kfw-color-background-dark-green: #398357;--kfw-color-opaque-white-90: #ffffffe6;--kfw-color-opaque-white-95: #fffffff2;--kfw-color-opaque-gray-500-10: #41484c1a;--kfw-color-opaque-gray-500-30: #41484c4d;--kfw-color-opaque-gray-500-90: #41484ce6;--kfw-color-state-danger: #c80538;--kfw-color-state-success: #398357;--kfw-color-state-warning: #9598e0;--kfw-color-status-red: #c80538;--kfw-color-status-yellow: #eac80b;--kfw-color-status-green: #398357;--kfw-color-line-6: #00446e;--kfw-color-line-7: #2d3134;--kfw-color-line-8: #a1adb5;--kfw-color-line-9: #005a8c;--kfw-color-line-10: #2d3134;--kfw-color-line-11: #b7f9aa;--kfw-color-line-12: #a1adb5;--kfw-color-product-container: #f6f7f8;--kfw-color-product-benefit: #007abc;--kfw-color-product-credit: #398357;--kfw-color-product-cooperation: #686fc8;--kfw-color-product-credit-benefit: #41484c;--kfw-color-icon: #005a8c;--kfw-color-icon-secondary: #54b3e2;--kfw-color-icon-disabled: #398357;--kfw-color-icon-disabled-secondary: #94eb90;--kfw-fontfamily: "KfW Centro Sans", Arial, "Helvetica Neue", Helvetica, sans-serif;--kfw-fontfamily-code: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;--kfw-space-xsmall: 1rem;--kfw-space-small: 2rem;--kfw-space-medium: 3rem;--kfw-space-large-min: 3.5rem;--kfw-space-large-max: 4rem;--kfw-space-large-val: .735vi + 3.0588rem;--kfw-space-big-min: 5rem;--kfw-space-big-max: 6rem;--kfw-space-big-val: 1.471vi + 4.1176rem;--kfw-fontspace: 2rem;--kfw-fontspace-2xsmall: .5rem;--kfw-fontspace-xsmall: 1rem;--kfw-fontspace-small: 1.5rem;--kfw-fontspace-large: 3rem;--kfw-fontspace-heading-1: 2rem;--kfw-fontspace-heading-2: 2rem;--kfw-fontspace-heading-3: 1rem;--kfw-fontspace-heading-4: 1rem;--kfw-fontspace-heading-5: 1rem;--kfw-fontspace-heading-6: 1rem;--kfw-fontsize: 1.6rem;--kfw-fontsize-introduction: 2rem;--kfw-fontsize-large: 1.8rem;--kfw-fontsize-small: 1.4rem;--kfw-fontsize-heading-1-min: 3rem;--kfw-fontsize-heading-1-max: 3.6rem;--kfw-fontsize-heading-1-val: .882vi + 2.4706rem;--kfw-fontsize-heading-2-min: 2.8rem;--kfw-fontsize-heading-2-max: 3.2rem;--kfw-fontsize-heading-2-val: .588vi + 2.4471rem;--kfw-fontsize-heading-3-min: 2.4rem;--kfw-fontsize-heading-3-max: 2.6rem;--kfw-fontsize-heading-3-val: .294vi + 2.2235rem;--kfw-fontsize-heading-4-min: 2rem;--kfw-fontsize-heading-4-max: 2.2rem;--kfw-fontsize-heading-4-val: .294vi + 1.8235rem;--kfw-fontsize-heading-5: 1.8rem;--kfw-fontsize-heading-6: 1.6rem;--kfw-lineheight: 1.4;--kfw-lineheight-list: 1.5;--kfw-lineheight-heading: 1.3;--kfw-lineheight-heading-5: 1.333;--kfw-borderradius: .4rem;--kfw-borderradius-large: 2rem;--kfw-borderradius-small: 2px;--kfw-borderradius-circle: 999.9rem;--kfw-borderwidth: 1px;--kfw-borderwidth-large: 2px;--kfw-focusring-outline-width: 2px;--kfw-focusring-outline-offset: 2px;--kfw-focusring-outline-style: dashed;--kfw-fontweight: 400;--kfw-fontweight-bold: 500;--kfw-breakpoint-mobile: 600px;--kfw-breakpoint-tablet: 840px;--kfw-breakpoint-desktop: 960px;--kfw-breakpoint-desktop-large: 1280px;--kfw-contentwrapper-narrow: 89.6rem;--kfw-contentwrapper-basic: 108rem;--kfw-contentwrapper-extended: 128rem;--kfw-safezone-min: 2rem;--kfw-safezone-max: 4rem;--kfw-safezone-val: 2.941vi + .2353rem}}@layer core{@layer tokens{:root{--kfw-icon-arrow-down: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='%232d3134' viewBox='0 0 24 24'%3E%3Cpath d='m2.146 7.852.706-.706a.5.5 0 0 1 .706 0l8.448 8.238 8.436-8.238a.5.5 0 0 1 .706 0l.706.706a.5.5 0 0 1 0 .706l-9.495 9.296a.5.5 0 0 1-.706 0L2.146 8.558a.5.5 0 0 1 0-.706'/%3E%3C/svg%3E");--kfw-icon-arrow-down-fn: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='%23005a8c' viewBox='0 0 24 24'%3E%3Cpath d='m2.146 7.852.706-.706a.5.5 0 0 1 .706 0l8.448 8.238 8.436-8.238a.5.5 0 0 1 .706 0l.706.706a.5.5 0 0 1 0 .706l-9.495 9.296a.5.5 0 0 1-.706 0L2.146 8.558a.5.5 0 0 1 0-.706'/%3E%3C/svg%3E");--kfw-icon-calendar-fn: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='%23005a8c' viewBox='0 0 24 24'%3E%3Ctitle%3Eicon/kalender%3C/title%3E%3Cpath fill='%23005a8c' fill-rule='evenodd' d='M7.5 2a.5.5 0 0 1 .5.5V4h8V2.5c0-.277.223-.5.5-.5h1a.5.5 0 0 1 .5.5V4h3.5a.5.5 0 0 1 .5.5v17a.5.5 0 0 1-.5.5h-19a.5.5 0 0 1-.5-.5v-17c0-.277.223-.5.5-.5H6V2.5c0-.277.223-.5.5-.5ZM20 6H4v14h16zM7.5 16a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5Zm5 0a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5Zm5 0a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5Zm-10-4a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5Zm5 0a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5Zm5 0a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5Zm-10-4a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5Zm5 0a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5Zm5 0a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5Z'/%3E%3C/svg%3E");--kfw-icon-time-fn: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='%23005a8c' viewBox='0 0 24 24'%3E%3Ctitle%3E01_Elemente (ATOME, MOLECULES)/Icons/Funktionsicons/Positiv/spaeter_festlegen%3C/title%3E%3Cpath fill='%23005a8c' fill-rule='evenodd' d='M12 2c5.5 0 10 4.5 10 10s-4.5 10-10 10S2 17.5 2 12 6.5 2 12 2m0 2c-4.4 0-8 3.6-8 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8m.4 3c.3 0 .5.2.5.5v5.3l2.6 2.6c.2.2.2.5 0 .7l-.7.7c-.2.2-.5.2-.7 0l-3.2-3.2V7.5c0-.3.2-.5.5-.5Z'/%3E%3C/svg%3E");--kfw-safezone: clamp(var(--kfw-safezone-min), var(--kfw-safezone-val), var(--kfw-safezone-max));--kfw-space-large: clamp(var(--kfw-space-large-min), var(--kfw-space-large-val), var(--kfw-space-large-max));--kfw-space-big: clamp(var(--kfw-space-big-min), var(--kfw-space-big-val), var(--kfw-space-big-max));--headline-color: var(--kfw-color-text);--kfw-focusring-outline-color: var(--kfw-color-fn-active)}}@layer base{:root{font-size:62.5%;font-family:var(--kfw-fontfamily);background-color:var(--kfw-color-background);color:var(--kfw-color-text);line-height:var(--kfw-lineheight);font-weight:var(--kfw-fontweight);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*:focus-visible{outline:var(--kfw-focusring-outline-width) var(--kfw-focusring-outline-style) var(--kfw-focusring-outline-color);outline-offset:var(--kfw-focusring-outline-offset)}body{margin:0;font-size:1.6rem}strong,b{font-weight:var(--kfw-fontweight-bold)}small{font-size:80%}:is(sub,sup){position:relative;line-height:0;vertical-align:baseline;font-size:75%}sub{bottom:-.25em}sup{top:-.5em}:is(address,blockquote,dl,ol,p,pre,table,ul){margin-block:0 var(--kfw-fontspace)}:is(address,blockquote,dl,ol,p,pre,table,ul):last-child{margin-block-end:0}ul,ol,menu{list-style:none inside none;padding-inline-start:0}mark{padding:.125rem .25rem;vertical-align:baseline;background-color:var(--kfw-color-background-dark-blue);color:var(--kfw-color-text-on-dark-bg)}blockquote{margin-inline:0}blockquote footer{margin-block-start:var(--kfw-fontspace-2xsmall)}table{width:100%;border-collapse:collapse;border-spacing:0;border-left:0;border-right:0;text-indent:0;overflow:visible;border-top:var(--kfw-borderwidth) solid var(--kfw-color-line-10);border-bottom:var(--kfw-borderwidth-large) solid var(--kfw-color-line-7)}tr{background-color:var(--kfw-color-background)}thead tr{border-bottom:var(--kfw-borderwidth) solid var(--kfw-color-line-8)}tr:not(:last-of-type){border-bottom:var(--kfw-borderwidth) solid var(--kfw-color-line-8)}tr.highlighted-col,tr.highlighted,td.highlighted-col,td.highlighted,th.highlighted-col,th.highlighted{background-color:var(--kfw-color-background-light-green)}th{text-align:start;font-weight:var(--kfw-fontweight-bold)}:where(th,td){border:0;vertical-align:top;letter-spacing:0;word-spacing:inherit;font-size:var(--kfw-fontsize);line-height:var(--kfw-lineheight);font-weight:var(--kfw-fontweight);color:var(--kfw-color-text);padding:1.2rem 1rem}table.striped tbody tr:nth-child(odd):not(.highlighted){background-color:var(--kfw-color-background-light-blue)}:where(audio,canvas,iframe,img,svg,video){vertical-align:middle}audio,video{display:inline-block}:where(iframe){border-style:none}img,video{max-width:100%;height:auto;border-style:none}figure{display:block;margin:0;padding:0}figure figcaption{padding:var(--kfw-space-xsmall)}code,kbd,samp,pre{font-family:var(--kfw-fontfamily-code);line-height:initial}pre{display:block;margin-block:0 var(--kfw-fontspace);overflow:auto;-ms-overflow-style:scrollbar}abbr[title]{text-decoration:underline dotted;cursor:help}ins{color:var(--kfw-color-state-success);text-decoration:none}del{color:var(--kfw-color-state-danger)}:is(h1,h2,h3,h4,h5,h6,.hl--1,.hl--2,.hl--3,.hl--4,.hl--5,.hl--6){font-weight:var(--kfw-fontweight-bold);line-height:var(--kfw-lineheight-heading);margin-block-start:0;color:var(--headline-color);display:block}h1,.hl--1{font-size:clamp(var(--kfw-fontsize-heading-1-min),var(--kfw-fontsize-heading-1-val),var(--kfw-fontsize-heading-1-max));margin-block-end:var(--kfw-fontspace-heading-1)}@media(min-width:1280px){h1,.hl--1{letter-spacing:var(--kfw-base-letterspacing-tight)}}h2,.hl--2{font-size:clamp(var(--kfw-fontsize-heading-2-min),var(--kfw-fontsize-heading-2-val),var(--kfw-fontsize-heading-2-max));margin-block-end:var(--kfw-fontspace-heading-2);letter-spacing:var(--kfw-base-letterspacing-tight)}h3,.hl--3{font-size:clamp(var(--kfw-fontsize-heading-3-min),var(--kfw-fontsize-heading-3-val),var(--kfw-fontsize-heading-3-max));margin-block-end:var(--kfw-fontspace-heading-3);letter-spacing:var(--kfw-base-letterspacing-tight)}@media(min-width:1280px){h3,.hl--3{letter-spacing:var(--kfw-base-letterspacing-normal)}}h4,.hl--4{font-size:clamp(var(--kfw-fontsize-heading-4-min),var(--kfw-fontsize-heading-4-val),var(--kfw-fontsize-heading-4-max));margin-block-end:var(--kfw-fontspace-heading-4)}h5,.hl--5{font-size:var(--kfw-fontsize-heading-5);margin-block-end:var(--kfw-fontspace-heading-5);line-height:var(--kfw-lineheight-heading-5);letter-spacing:var(--kfw-base-letterspacing-normal)}@media(min-width:1280px){h5,.hl--5{letter-spacing:var(--kfw-base-letterspacing-wide)}}h6,.hl--6{font-size:var(--kfw-fontsize-heading-6);margin-block-end:var(--kfw-fontspace-heading-6);letter-spacing:var(--kfw-base-letterspacing-wide);line-height:var(--kfw-lineheight)}.icon{display:inline-block;flex-shrink:0;vertical-align:top;min-width:1.6rem;min-height:1.6rem;filter:brightness(0) saturate(100%) invert(19%) sepia(5%) saturate(516%) hue-rotate(168deg) brightness(95%) contrast(97%)}.form-control{--borderhover: var(--kfw-color-fn-active);--placeholder-color: var(--kfw-color-fn);appearance:none;width:100%;height:4.3rem;font-size:var(--kfw-fontsize);font-family:inherit;line-height:var(--kfw-lineheight);color:var(--kfw-color-fn);border-radius:var(--kfw-borderradius);margin-block-start:0;border:var(--kfw-borderwidth) solid var(--kfw-base-color-gray-500);padding-inline:1.5rem;padding-block:1rem;background-color:var(--kfw-color-background)}.form-control::placeholder{color:var(--placeholder-color)}.form-control:disabled{--placeholder-color: var(--kfw-color-text);background-color:transparent;color:var(--kfw-color-text);border-color:var(--kfw-color-fn-inactive)}.form-control:hover:not(:disabled){box-shadow:0 0 0 var(--kfw-borderwidth) var(--borderhover)}:is([type=checkbox],[type=radio],select.form-control):not(:disabled){cursor:pointer}select.form-control{padding-block:0;background-position:center right 1.5rem;background-size:2.4rem auto;background-repeat:no-repeat;background-image:var(--kfw-icon-arrow-down-fn)}select.form-control:disabled{background-image:var(--kfw-icon-arrow-down)}textarea.form-control{height:auto}.form-control[aria-invalid=true]{--borderhover: var(--kfw-color-state-danger);--placeholder-color: var(--kfw-color-state-danger);border-color:var(--kfw-color-state-danger);color:var(--kfw-color-state-danger);box-shadow:0 0 0 var(--kfw-borderwidth) var(--borderhover)}:is(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}[type=file],[type=range]{padding:0;border:0;width:100%}[type=file]::file-selector-button{margin-inline-end:var(--kfw-space-xsmall)}:where(input,select,textarea,fieldset)+small,.form-text,.invalid-feedback{display:block;width:100%;margin-block-start:.8rem;font-size:var(--kfw-fontsize-small);line-height:var(--kfw-lineheight);letter-spacing:var(--kfw-base-letterspacing-normal)}.invalid-feedback{color:var(--kfw-color-state-danger)}.invalid-feedback__icon{filter:brightness(0) saturate(100%) invert(10%) sepia(97%) saturate(4457%) hue-rotate(338deg) brightness(106%) contrast(98%)}:is(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 :is([type=checkbox],[type=radio]){appearance:none;width:var(--field-size);height:var(--field-size);margin:0;border:var(--kfw-borderwidth) solid var(--kfw-color-fn-active);color:var(--kfw-color-fn-active);vertical-align:middle;position:relative;display:flex;align-items:center;flex-shrink:0;justify-content:center;background-color:var(--kfw-color-background)}.list-group-form :is([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 :is([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 :is([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 :is([type=checkbox],[type=radio]):checked:before{content:""}.list-group-form :is([type=radio],[type=checkbox]):hover:not(:disabled),.list-group-form :is([type=radio],[type=checkbox]):focus:not(:disabled){border-width:var(--kfw-borderwidth-large)}.list-group-form--with-description label{font-weight:var(--kfw-fontweight-bold)}.list-group-form--with-description label>*{font-weight:var(--kfw-fontweight)}.list-group-form>*:has(input:not(:disabled)) label{cursor:pointer}.list-group-form>*:has(.list-group-form--subgroup){flex-wrap:wrap}.list-group-form--subgroup{flex-basis:100%;margin-block-start:var(--kfw-space-small);padding-left:calc(var(--field-size) + var(--col-gap))}@media(min-width:600px){.list-group-form--inline{flex-flow:row wrap}}:where([type=date],[type=time])::-webkit-calendar-picker-indicator{background:transparent;width:1.8rem;height:1.8rem}[type=date]::-webkit-calendar-picker-indicator{content:var(--kfw-icon-calendar-fn)}[type=time]::-webkit-calendar-picker-indicator{content:var(--kfw-icon-time-fn)}:where(a:not([role=button]),[role=link]){--link-color: var(--kfw-color-fn);--link-color-hover: var(--kfw-color-fn-active);color:var(--link-color);text-decoration:none;border-radius:var(--kfw-borderradius);display:inline-flex;vertical-align:top}:where(a:not([role=button]),[role=link]):is(:hover,:focus,:active){color:var(--link-color-hover);text-decoration:underline}:where(a:not([role=button]),[role=link]):has(.icon){--space-between: .5rem;justify-content:flex-start;align-items:center;gap:var(--space-between)}:where(a,[role=link],button,[type=button]) .icon{filter:brightness(0) saturate(100%) invert(22%) sepia(24%) saturate(6721%) hue-rotate(183deg) brightness(94%) contrast(100%)}:where(a,[role=link],button,[type=button]):is(:hover,:focus) .icon{filter:brightness(0) saturate(100%) invert(18%) sepia(37%) saturate(3570%) hue-rotate(182deg) brightness(94%) contrast(100%)}button,[type=submit],[type=reset],[type=button],[role=button],[type=file]::file-selector-button{--space-between: .8rem;border:var(--kfw-borderwidth) solid transparent;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}: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):is(:hover,:focus){color:var(--button-color-hover);background-color:var(--button-bg-hover);border-color:var(--button-border-color-hover);text-decoration:underline}.button--primary .icon{filter:brightness(0) saturate(100%) invert(100%) sepia(100%) saturate(0%) hue-rotate(181deg) brightness(103%) contrast(103%)}.button--secondary .icon{filter:brightness(0) saturate(100%) invert(24%) sepia(98%) saturate(876%) hue-rotate(170deg) brightness(95%) contrast(102%)}.button--primary:is(:hover,:focus) .icon{filter:brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(7500%) hue-rotate(271deg) brightness(103%) contrast(103%)}.button--secondary:is(:hover,:focus) .icon{filter:brightness(0) saturate(100%) invert(99%) sepia(100%) saturate(4%) hue-rotate(134deg) brightness(101%) contrast(104%)}[type=file]::file-selector-button,:is([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:is(:hover,:focus),:is([type=reset],.button--secondary):is(: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:is(: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]) :is(input:not([type=submit],[type=button],[type=reset]),select,textarea){pointer-events:none}.button--full{width:100%}.searchfield{position:relative;display:flex}.searchfield__input{width:100%;padding-right:3rem}.searchfield__input::-webkit-search-cancel-button{appearance:none}.searchfield__button{position:absolute;right:1.5rem;top:50%;transform:translateY(-50%);background:none;padding:.25rem;margin:0;cursor:pointer;border-radius:1rem}.searchfield__button:is(:hover,:focus){outline:2px solid var(--kfw-color-fn-active)}.searchfield__icon{width:2.4rem;height:2.4rem;filter:brightness(0) saturate(100%) invert(17%) sepia(49%) saturate(4983%) hue-rotate(186deg) brightness(98%) contrast(101%)}.file-upload{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);margin-block-end:var(--kfw-space-medium)}.file-upload__title{margin-block-end:var(--kfw-space-medium);font-weight:var(--kfw-fontweight);text-align:center}.file-upload__input{width:auto;max-width:100%}.file-upload--with-native-input .file-upload__input{display:none}.file-upload--with-native-input .file-upload__input--has-files{display:block}.file-upload--with-native-input:has(.file-upload__input--has-files) :is(button,[role=button]){display:none}.file-upload__icon{width:4rem;height:4rem;margin:2rem;filter:brightness(0) saturate(100%) invert(14%) sepia(93%) saturate(3363%) hue-rotate(187deg) brightness(100%) contrast(100%)}:is(.container,.container-fluid,.container-narrow,.container-extended,.container-extended-fullwidth){margin-inline:auto;width:100%}:is(.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{margin-top:var(--kfw-space-medium)}table.file-upload-table table{border-top:0;min-height:10px;min-width:500px}table.file-upload-table .invalid-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%}}}}@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 :is(button,a){font-size:var(--kfw-fontsize-large)}.header-logo-mobile{display:none}.header-logo-desktop{display:block;height:6rem;margin-block:3rem}}.footer{--kfw-focusring-outline-color: var(--kfw-color-background);border-top:var(--kfw-base-borderwidth-md) solid var(--kfw-color-line-11);font-size:var(--kfw-fontsize-small);line-height:var(--kfw-lineheight);padding-block:var(--kfw-space-medium) var(--kfw-space-large)}.footer>*{align-items:baseline;display:flex;flex-direction:column;gap:var(--kfw-space-medium);justify-content:space-between}@media(min-width:960px){.footer>*{gap:3.6rem;flex-direction:row}}.footer__copyright{flex-shrink:0}.footer__list{list-style:none;padding:0;margin:0;display:flex;flex-flow:row wrap;max-width:100%;gap:1.6rem var(--kfw-space-large)}.grid{display:grid;grid-template-columns:1fr;column-gap:var(--kfw-safezone);margin-block-end:var(--kfw-fontspace)}@media(min-width:840px){.grid{grid-template-columns:repeat(auto-fit,minmax(0,1fr));margin-block-end:0}}.hero{--hero-content-desktop-width: 42.9rem}.hero>*{position:relative}.hero__bars{display:block;width:100%}@media(min-width:600px){.hero__bars{display:none}}.hero__bars-desktop{display:none;width:var(--hero-content-desktop-width);position:absolute;top:4rem;left:4rem;bottom:4rem}@media(min-width:600px){.hero__bars-desktop{display:block}}.hero__title{width:100%;margin-block:0;align-items:center;display:flex;flex-direction:row;padding:2rem;background-color:var(--kfw-color-background-light-blue)}@media(min-width:600px){.hero__title{flex-direction:row;position:absolute;display:flex;width:var(--hero-content-desktop-width);background-color:var(--kfw-color-opaque-white-95);left:4rem;top:calc(5rem + 25px);border-radius:0 0 var(--kfw-borderradius-large) 0;padding:2rem 3rem 3rem}}.hero__image{width:100%;margin-inline:auto;display:block;object-fit:cover;height:auto;max-width:128rem}}@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]):is(:hover,:focus,:active){text-decoration:none}:where(.bg-dark,.footer) :where([role=link],a:not([role=button])) .icon{filter:brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(7499%) hue-rotate(269deg) brightness(103%) contrast(103%)}:where(.bg-dark,.footer) :where(button,[type=submit],[type=reset],[type=button],[role=button]) .icon{filter:brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(7476%) hue-rotate(70deg) brightness(102%) contrast(106%)}:where(.bg-dark,.footer) :where(.button--primary,[type=submit]){--button-color: var(--kfw-color-fn);--button-bg: var(--kfw-color-text-on-dark-bg);--button-border-color: var(--kfw-color-text-on-dark-bg);--button-bg-hover: var(--kfw-color-text-on-dark-bg);--button-color-hover: var(--button-color);--button-border-color-hover: var(--kfw-color-text-on-dark-bg)}:where(.bg-dark,.footer) :where(.button--primary,[type=submit]) .icon{filter:brightness(0) saturate(100%) invert(23%) sepia(54%) saturate(2409%) hue-rotate(179deg) brightness(93%) contrast(101%)}:where(.bg-dark,.footer) :where(.button--secondary,[type=reset]){--button-color: var(--kfw-color-text-on-dark-bg);--button-border-color: var(--kfw-color-text-on-dark-bg);--button-bg-hover: var(--kfw-color-text-on-dark-bg);--button-color-hover: var(--kfw-color-text);--button-border-color-hover: var(--kfw-color-text-on-dark-bg)}:where(.bg-dark,.footer) :where(.button--secondary,[type=reset]) .icon{filter:brightness(0) saturate(100%) invert(100%) sepia(5%) saturate(1%) hue-rotate(132deg) brightness(106%) contrast(102%)}:where(.bg-dark,.footer) :where(.button--secondary,[type=reset]):is(:hover,:focus) .icon{filter:brightness(0) saturate(100%) invert(18%) sepia(3%) saturate(1106%) hue-rotate(139deg) brightness(91%) contrast(93%)}: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-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)}}
package/demo/scripts/build-custom-media.js ADDED
@@ -0,0 +1,38 @@
1
+ import fs from "fs/promises"
2
+ import postcss from "postcss"
3
+ import path from "path"
4
+
5
+ const cssFile = path.resolve("node_modules/@openkfw/design-tokens/output/css/kfw-design-tokens.light.css")
6
+
7
+ const outputFile = "./src/vendor/gen-custom-media.css"
8
+
9
+ async function buildCustomMediaCSS() {
10
+ try {
11
+ const cssContent = await fs.readFile(cssFile, "utf8")
12
+ const versionMatch = cssContent.match(/KfW Design Tokens v([\d.]+)/)
13
+ const version = versionMatch ? versionMatch[1] : "unknown"
14
+ const result = await postcss().process(cssContent, { from: undefined })
15
+ const root = result.root
16
+ let customMediaCSS =
17
+ `/* Custom Media Queries generated from KfW Design Tokens v${version} */\n\n` +
18
+ "/* See: https://www.w3.org/TR/mediaqueries-5/#at-ruledef-custom-media */\n\n"
19
+
20
+ root.walkDecls((decl) => {
21
+ const match = decl.prop.match(/^--kfw-breakpoint-(.+)$/)
22
+ if (match) {
23
+ const name = match[1]
24
+ const value = decl.value.trim()
25
+ customMediaCSS += `@custom-media --kfw-breakpoint-${name} (min-width: ${value});\n`
26
+ }
27
+ })
28
+
29
+ // --- Datei schreiben ---
30
+ await fs.writeFile(outputFile, customMediaCSS)
31
+ console.log(`✅ Custom media file generated with version v${version}`)
32
+ } catch (err) {
33
+ console.error("❌ Error while building custom media CSS:", err)
34
+ throw new Error(err)
35
+ }
36
+ }
37
+
38
+ buildCustomMediaCSS()
package/demo/scripts/postcss.color-to-filter.js ADDED
@@ -0,0 +1,66 @@
1
+ import CssFilterConverter from "css-filter-converter"
2
+
3
+ export default function postcssColorToFilterPlugin() {
4
+ return {
5
+ postcssPlugin: "postcss-color-to-filter",
6
+ async Once(root, { result }) {
7
+ const cssVariables = {}
8
+
9
+ // CSS-Variablen aus :root sammeln
10
+ root.walkRules((rule) => {
11
+ if (rule.selector === ":root" || rule.selector.startsWith(":root,")) {
12
+ rule.walkDecls((decl) => {
13
+ if (decl.prop.startsWith("--")) {
14
+ cssVariables[decl.prop] = decl.value.trim()
15
+ }
16
+ })
17
+ }
18
+ })
19
+
20
+ const colorToFilterRegex = /color-to-filter\(\s*(var\(\s*--[\w-]+\s*\))\s*\)/g
21
+
22
+ root.walkDecls(async (decl) => {
23
+ let match
24
+ const matches = []
25
+
26
+ while ((match = colorToFilterRegex.exec(decl.value)) !== null) {
27
+ matches.push(match)
28
+ }
29
+
30
+ let newValue = decl.value
31
+ let hasReplacements = false
32
+
33
+ for (const match of matches) {
34
+ const [fullMatch, paramRaw] = match
35
+ let param = paramRaw.trim()
36
+ const varMatch = param.match(/^var\((--[^)]+)\)$/)
37
+
38
+ if (varMatch) {
39
+ const varName = varMatch[1]
40
+ if (cssVariables[varName]) {
41
+ param = cssVariables[varName]
42
+ } else {
43
+ result.warn(`CSS variable ${varName} not found`, { node: decl })
44
+ continue
45
+ }
46
+ }
47
+
48
+ try {
49
+ const result = await CssFilterConverter.hexToFilter(param)
50
+ const filterString = result.color || param
51
+ newValue = newValue.replace(fullMatch, filterString)
52
+ hasReplacements = true
53
+ } catch (e) {
54
+ result.warn(`Error generating filter for color "${param}": ${e.message}`, { node: decl })
55
+ }
56
+ }
57
+
58
+ if (hasReplacements) {
59
+ decl.value = newValue
60
+ }
61
+ })
62
+ }
63
+ }
64
+ }
65
+
66
+ postcssColorToFilterPlugin.postcss = true
package/demo/scripts/postcss.svg-load-plugin.js ADDED
@@ -0,0 +1,96 @@
1
+ import fs from "fs/promises"
2
+ import path from "path"
3
+
4
+ const svgCache = {}
5
+
6
+ export default function postcssSvgLoadPlugin(options = {}) {
7
+ return {
8
+ postcssPlugin: "postcss-svg-load",
9
+ async Once(root, { result }) {
10
+ const cssFilePath = result.opts.from
11
+ const baseDir = options.baseDir ?? (cssFilePath ? path.dirname(cssFilePath) : process.cwd())
12
+ const cssVariables = {}
13
+
14
+ root.walkRules((rule) => {
15
+ if (rule.selector === ":root" || rule.selector.startsWith(":root,")) {
16
+ rule.walkDecls((decl) => {
17
+ if (decl.prop.startsWith("--")) {
18
+ cssVariables[decl.prop] = decl.value.trim()
19
+ }
20
+ })
21
+ }
22
+ })
23
+
24
+ const svgLoadRegex = /svg-load\(\s*["']([^"']+)["'](?:\s*,\s*["']([^"']*)["'])?\s*\)/g
25
+ const processingPromises = []
26
+
27
+ root.walkDecls((decl) => {
28
+ let match
29
+ const matches = []
30
+
31
+ while ((match = svgLoadRegex.exec(decl.value)) !== null) {
32
+ matches.push(match)
33
+ }
34
+
35
+ for (const match of matches) {
36
+ const [fullMatch, svgRelativePath, colorParam] = match
37
+
38
+ let color = null
39
+
40
+ if (colorParam !== undefined && colorParam !== "") {
41
+ const varMatch = colorParam.match(/^var\((--[^)]+)\)$/)
42
+ if (varMatch) {
43
+ const varName = varMatch[1]
44
+ if (cssVariables[varName]) {
45
+ color = cssVariables[varName]
46
+ } else {
47
+ result.warn(`CSS variable ${varName} not found`, { node: decl })
48
+ continue
49
+ }
50
+ } else {
51
+ color = colorParam
52
+ }
53
+ }
54
+
55
+ const svgAbsolutePath = path.resolve(baseDir, svgRelativePath)
56
+ const cacheKey = `${svgAbsolutePath}::${color ?? ""}`
57
+
58
+ const promise = (async () => {
59
+ if (svgCache[cacheKey]) {
60
+ decl.value = decl.value.replace(fullMatch, svgCache[cacheKey])
61
+ return
62
+ }
63
+
64
+ try {
65
+ let svgContent = await fs.readFile(svgAbsolutePath, "utf8")
66
+
67
+ if (color !== null) {
68
+ if (/<svg[^>]*fill="[^"]*"[^>]*>/.test(svgContent)) {
69
+ svgContent = svgContent.replace(/(<svg[^>]*?)fill="[^"]*"([^>]*>)/, `$1fill="${color}"$2`)
70
+ } else {
71
+ svgContent = svgContent.replace(/(<svg[^>]*)>/, `$1 fill="${color}">`)
72
+ }
73
+ }
74
+
75
+ const encodedSvg = encodeURIComponent(svgContent).replace(/'/g, "%27").replace(/"/g, "%22")
76
+
77
+ const dataUrl = `url("data:image/svg+xml,${encodedSvg}")`
78
+
79
+ svgCache[cacheKey] = dataUrl
80
+
81
+ decl.value = decl.value.replace(fullMatch, dataUrl)
82
+ } catch {
83
+ result.warn(`SVG file not found: ${svgAbsolutePath}`, { node: decl })
84
+ }
85
+ })()
86
+
87
+ processingPromises.push(promise)
88
+ }
89
+ })
90
+
91
+ await Promise.all(processingPromises)
92
+ }
93
+ }
94
+ }
95
+
96
+ postcssSvgLoadPlugin.postcss = true
package/demo/src/style.css CHANGED
@@ -1,19 +1,25 @@
1
1
  /* Establish the order of layers upfront */
2
- @layer core, third-party, components, utility;
3
- @layer core.reset, core.tokens, core.base;
2
+ @layer reset, core, third-party, components, utility;
3
+ @layer core.tokens, core.base, core.variations;
4
4
  @layer third-party.imports, third-party.overrides;
5
5
  @layer components.base, components.variations;
6
6
 
7
7
  /* Reset, normalize, etc. */
8
- @import url("vendor/uaplus.css") layer(core.reset);
8
+ @import url("vendor/uaplus.css") layer(reset);
9
9
 
10
10
  /* KfW Design Tokens with Custom Media Queries */
11
11
  @import url("@openkfw/design-tokens/output/css/kfw-design-tokens.light.css") layer(core.tokens);
12
- @import url("vendor/gen-custom-media.css") layer(core.tokens);
12
+ @import url("vendor/gen-custom-media.css");
13
13
 
14
14
  @layer core {
15
15
  @layer tokens {
16
16
  :root {
17
+ /* icons */
18
+ --kfw-icon-arrow-down: svg-load("icons/arrow-down.svg", "var(--kfw-color-text)");
19
+ --kfw-icon-arrow-down-fn: svg-load("icons/arrow-down.svg", "var(--kfw-color-fn)");
20
+ --kfw-icon-calendar-fn: svg-load("icons/calendar.svg", "var(--kfw-color-fn)");
21
+ --kfw-icon-time-fn: svg-load("icons/time.svg", "var(--kfw-color-fn)");
22
+
17
23
  /* fluid shorthands */
18
24
  --kfw-safezone: clamp(var(--kfw-safezone-min), var(--kfw-safezone-val), var(--kfw-safezone-max));
19
25
  --kfw-space-large: clamp(var(--kfw-space-large-min), var(--kfw-space-large-val), var(--kfw-space-large-max));
@@ -129,6 +135,15 @@
129
135
  border-bottom: var(--kfw-borderwidth) solid var(--kfw-color-line-8);
130
136
  }
131
137
 
138
+ tr.highlighted-col,
139
+ tr.highlighted,
140
+ td.highlighted-col,
141
+ td.highlighted,
142
+ th.highlighted-col,
143
+ th.highlighted {
144
+ background-color: var(--kfw-color-background-light-green);
145
+ }
146
+
132
147
  th {
133
148
  text-align: start;
134
149
  font-weight: var(--kfw-fontweight-bold);
@@ -146,6 +161,10 @@
146
161
  padding: 1.2rem 1rem;
147
162
  }
148
163
 
164
+ table.striped tbody tr:nth-child(odd):not(.highlighted) {
165
+ background-color: var(--kfw-color-background-light-blue);
166
+ }
167
+
149
168
  /**
150
169
  * Embedded content
151
170
  */
@@ -280,26 +299,15 @@
280
299
  }
281
300
 
282
301
  /**
283
- * Link
302
+ * Icon
284
303
  */
285
- :where(a:not([role="button"])),
286
- [role="link"] {
287
- --link-color: var(--kfw-color-fn);
288
- --link-color-hover: var(--kfw-color-fn-active);
289
-
290
- color: var(--link-color);
291
- text-decoration: none;
292
- border-radius: var(--kfw-borderradius);
293
- }
294
-
295
- a:not([role="button"]):where(:hover, :focus, :active, [aria-current]:not([aria-current="false"])),
296
- [role="link"]:where(:hover, :focus, :active, [aria-current]:not([aria-current="false"])) {
297
- color: var(--link-color-hover);
298
- text-decoration: underline;
299
- }
300
-
301
- a[role="button"] {
304
+ .icon {
302
305
  display: inline-block;
306
+ flex-shrink: 0;
307
+ vertical-align: top;
308
+ min-width: 1.6rem;
309
+ min-height: 1.6rem;
310
+ filter: color-to-filter(var(--kfw-color-text));
303
311
  }
304
312
 
305
313
  /**
@@ -346,6 +354,14 @@
346
354
 
347
355
  select.form-control {
348
356
  padding-block: 0;
357
+ background-position: center right 1.5rem;
358
+ background-size: 2.4rem auto;
359
+ background-repeat: no-repeat;
360
+ background-image: var(--kfw-icon-arrow-down-fn);
361
+ }
362
+
363
+ select.form-control:disabled {
364
+ background-image: var(--kfw-icon-arrow-down);
349
365
  }
350
366
 
351
367
  textarea.form-control {
@@ -402,6 +418,10 @@
402
418
  color: var(--kfw-color-state-danger);
403
419
  }
404
420
 
421
+ .invalid-feedback__icon {
422
+ filter: color-to-filter(var(--kfw-base-color-red-400));
423
+ }
424
+
405
425
  :is(label, .form-label) {
406
426
  display: inline-block;
407
427
  margin-block-end: 0.8rem;
@@ -409,7 +429,38 @@
409
429
  color: var(--kfw-color-text);
410
430
  }
411
431
 
412
- :is([type="checkbox"], [type="radio"]) {
432
+ .form-group {
433
+ margin-block-end: var(--kfw-space-medium);
434
+ }
435
+
436
+ .list-group-form {
437
+ --col-gap: 1.5rem;
438
+ --field-size: 2.8rem;
439
+
440
+ align-items: flex-start;
441
+ display: flex;
442
+ flex-direction: column;
443
+ gap: var(--kfw-space-small) var(--kfw-space-medium);
444
+ }
445
+
446
+ .list-group-form > * {
447
+ align-items: flex-start;
448
+ display: flex;
449
+ margin-bottom: 0;
450
+ }
451
+
452
+ .list-group-form label {
453
+ font-weight: var(--kfw-fontweight);
454
+ padding-left: var(--col-gap);
455
+ width: 100%;
456
+ margin-block-end: 0;
457
+ display: flex;
458
+ flex: 1 1;
459
+ flex-direction: column;
460
+ padding-block-start: 0.4rem;
461
+ }
462
+
463
+ .list-group-form :is([type="checkbox"], [type="radio"]) {
413
464
  appearance: none;
414
465
  width: var(--field-size);
415
466
  height: var(--field-size);
@@ -425,27 +476,27 @@
425
476
  background-color: var(--kfw-color-background);
426
477
  }
427
478
 
428
- :is([type="checkbox"], [type="radio"])[aria-invalid="true"] {
479
+ .list-group-form :is([type="checkbox"], [type="radio"])[aria-invalid="true"] {
429
480
  border-color: var(--kfw-color-state-danger);
430
481
  border-width: var(--kfw-borderwidth-large);
431
482
  color: var(--kfw-color-state-danger);
432
483
  }
433
484
 
434
- [type="radio"] {
485
+ .list-group-form [type="radio"] {
435
486
  border-radius: var(--kfw-borderradius-circle);
436
487
  }
437
488
 
438
- [type="checkbox"] {
489
+ .list-group-form [type="checkbox"] {
439
490
  border-radius: var(--kfw-borderradius);
440
491
  }
441
492
 
442
- :is([type="checkbox"], [type="radio"]):disabled {
493
+ .list-group-form :is([type="checkbox"], [type="radio"]):disabled {
443
494
  background-color: var(--kfw-base-color-gray-100);
444
495
  color: var(--kfw-color-fn-inactive);
445
496
  border-color: var(--kfw-color-fn-inactive);
446
497
  }
447
498
 
448
- :is([type="checkbox"], [type="radio"])::before {
499
+ .list-group-form :is([type="checkbox"], [type="radio"])::before {
449
500
  content: none;
450
501
  display: block;
451
502
  position: absolute;
@@ -456,7 +507,7 @@
456
507
  border-left-style: solid;
457
508
  }
458
509
 
459
- [type="checkbox"]::before {
510
+ .list-group-form [type="checkbox"]::before {
460
511
  width: 1.6rem;
461
512
  height: 0.9rem;
462
513
  transform: translate(-50%, -50%) rotate(314deg);
@@ -465,7 +516,7 @@
465
516
  border-left-width: 0.225rem;
466
517
  }
467
518
 
468
- [type="radio"]::before {
519
+ .list-group-form [type="radio"]::before {
469
520
  width: 1.4rem;
470
521
  height: 1.4rem;
471
522
  transform: translate(-50%, -50%);
@@ -474,46 +525,15 @@
474
525
  forced-color-adjust: none;
475
526
  }
476
527
 
477
- :is([type="checkbox"], [type="radio"]):checked::before {
528
+ .list-group-form :is([type="checkbox"], [type="radio"]):checked::before {
478
529
  content: "";
479
530
  }
480
531
 
481
- :is([type="radio"], [type="checkbox"]):hover:not(:disabled),
482
- :is([type="radio"], [type="checkbox"]):focus:not(:disabled) {
532
+ .list-group-form :is([type="radio"], [type="checkbox"]):hover:not(:disabled),
533
+ .list-group-form :is([type="radio"], [type="checkbox"]):focus:not(:disabled) {
483
534
  border-width: var(--kfw-borderwidth-large);
484
535
  }
485
536
 
486
- .form-group {
487
- margin-block-end: var(--kfw-space-medium);
488
- }
489
-
490
- .list-group-form {
491
- --col-gap: 1.5rem;
492
- --field-size: 2.8rem;
493
-
494
- align-items: flex-start;
495
- display: flex;
496
- flex-direction: column;
497
- gap: var(--kfw-space-small) var(--kfw-space-medium);
498
- }
499
-
500
- .list-group-form > * {
501
- align-items: flex-start;
502
- display: flex;
503
- margin-bottom: 0;
504
- }
505
-
506
- .list-group-form label {
507
- font-weight: var(--kfw-fontweight);
508
- padding-left: var(--col-gap);
509
- width: 100%;
510
- margin-block-end: 0;
511
- display: flex;
512
- flex: 1 1;
513
- flex-direction: column;
514
- padding-block-start: 0.4rem;
515
- }
516
-
517
537
  .list-group-form--with-description label {
518
538
  font-weight: var(--kfw-fontweight-bold);
519
539
  }
@@ -542,34 +562,81 @@
542
562
  }
543
563
  }
544
564
 
545
- /**
546
- * Button
547
- */
565
+ :where([type="date"], [type="time"])::-webkit-calendar-picker-indicator {
566
+ background: transparent; /* rest native icon */
567
+ width: 1.8rem;
568
+ height: 1.8rem;
569
+ }
570
+
571
+ [type="date"]::-webkit-calendar-picker-indicator {
572
+ content: var(--kfw-icon-calendar-fn);
573
+ }
574
+
575
+ [type="time"]::-webkit-calendar-picker-indicator {
576
+ content: var(--kfw-icon-time-fn);
577
+ }
578
+
579
+ :where(a:not([role="button"]), [role="link"]) {
580
+ --link-color: var(--kfw-color-fn);
581
+ --link-color-hover: var(--kfw-color-fn-active);
582
+
583
+ color: var(--link-color);
584
+ text-decoration: none;
585
+ border-radius: var(--kfw-borderradius);
586
+ display: inline-flex;
587
+ vertical-align: top;
588
+ }
589
+
590
+ :where(a:not([role="button"]), [role="link"]):is(:hover, :focus, :active) {
591
+ color: var(--link-color-hover);
592
+ text-decoration: underline;
593
+ }
594
+
595
+ :where(a:not([role="button"]), [role="link"]):has(.icon) {
596
+ --space-between: 0.5rem;
597
+
598
+ justify-content: flex-start;
599
+ align-items: center;
600
+ gap: var(--space-between);
601
+ }
602
+
603
+ :where(a, [role="link"], button, [type="button"]) .icon {
604
+ filter: color-to-filter(var(--kfw-color-fn));
605
+ }
606
+
607
+ :where(a, [role="link"], button, [type="button"]):is(:hover, :focus) .icon {
608
+ filter: color-to-filter(var(--kfw-color-fn-active));
609
+ }
610
+
548
611
  button,
549
612
  [type="submit"],
550
613
  [type="reset"],
551
614
  [type="button"],
552
- [type="file"]::file-selector-button,
553
- [role="button"] {
615
+ [role="button"],
616
+ [type="file"]::file-selector-button {
617
+ --space-between: 0.8rem;
618
+
554
619
  border: var(--kfw-borderwidth) solid transparent;
555
620
  font-family: var(--kfw-fontfamily);
556
621
  font-size: var(--kfw-fontsize);
557
622
  font-weight: var(--kfw-fontweight);
558
623
  border-radius: var(--kfw-borderradius);
559
624
  display: inline-flex;
560
- gap: 0.8rem;
625
+ gap: var(--space-between);
561
626
  text-align: center;
562
627
  text-decoration: none;
563
628
  line-height: var(--kfw-lineheight);
564
- padding: 1.2rem 2.5rem;
629
+ padding-block: 1.2rem;
630
+ padding-inline: 2.5rem;
565
631
  justify-content: center;
566
632
  max-width: 100%;
567
633
  vertical-align: middle;
568
634
  white-space: nowrap;
569
635
  cursor: pointer;
636
+ align-items: center;
570
637
  }
571
638
 
572
- .button--primary {
639
+ :where([type="submit"], .button--primary) {
573
640
  --button-border-color: var(--kfw-color-fn);
574
641
  --button-bg: var(--kfw-color-fn);
575
642
  --button-color: var(--kfw-color-text-on-dark-bg);
@@ -582,13 +649,29 @@
582
649
  border-color: var(--button-border-color);
583
650
  }
584
651
 
585
- .button--primary:is(:hover, :focus) {
652
+ :where([type="submit"], .button--primary):is(:hover, :focus) {
586
653
  color: var(--button-color-hover);
587
654
  background-color: var(--button-bg-hover);
588
655
  border-color: var(--button-border-color-hover);
589
656
  text-decoration: underline;
590
657
  }
591
658
 
659
+ .button--primary .icon {
660
+ filter: color-to-filter(var(--kfw-color-text-on-dark-bg));
661
+ }
662
+
663
+ .button--secondary .icon {
664
+ filter: color-to-filter(var(--kfw-color-fn));
665
+ }
666
+
667
+ .button--primary:is(:hover, :focus) .icon {
668
+ filter: color-to-filter(var(--kfw-color-text-on-dark-bg));
669
+ }
670
+
671
+ .button--secondary:is(:hover, :focus) .icon {
672
+ filter: color-to-filter(var(--kfw-color-text-on-dark-bg));
673
+ }
674
+
592
675
  [type="file"]::file-selector-button,
593
676
  :is([type="reset"], .button--secondary) {
594
677
  --button-border-color: var(--kfw-color-fn);
@@ -611,10 +694,19 @@
611
694
  text-decoration: underline;
612
695
  }
613
696
 
697
+ :where(.button--primary, .button--secondary):has(.icon--left) {
698
+ padding-inline-start: 2rem;
699
+ }
700
+
701
+ :where(.button--primary, .button--secondary):has(.icon--right) {
702
+ padding-inline-end: 2rem;
703
+ }
704
+
614
705
  .button--tertiary {
615
706
  --button-color: var(--kfw-color-fn);
616
707
  --button-bg: transparent;
617
708
  --button-color-hover: var(--kfw-color-fn-active);
709
+ --space-between: 0.5rem;
618
710
 
619
711
  background-color: var(--button-bg);
620
712
  color: var(--button-color);
@@ -641,6 +733,49 @@
641
733
  pointer-events: none;
642
734
  }
643
735
 
736
+ .button--full {
737
+ width: 100%;
738
+ }
739
+
740
+ /**
741
+ * Searchfield
742
+ */
743
+ .searchfield {
744
+ position: relative;
745
+ display: flex;
746
+ }
747
+
748
+ .searchfield__input {
749
+ width: 100%;
750
+ padding-right: 3rem;
751
+ }
752
+
753
+ .searchfield__input::-webkit-search-cancel-button {
754
+ appearance: none;
755
+ }
756
+
757
+ .searchfield__button {
758
+ position: absolute;
759
+ right: 1.5rem;
760
+ top: 50%;
761
+ transform: translateY(-50%);
762
+ background: none;
763
+ padding: 0.25rem;
764
+ margin: 0;
765
+ cursor: pointer;
766
+ border-radius: 1rem;
767
+ }
768
+
769
+ .searchfield__button:is(:hover, :focus) {
770
+ outline: 2px solid var(--kfw-color-fn-active);
771
+ }
772
+
773
+ .searchfield__icon {
774
+ width: 2.4rem;
775
+ height: 2.4rem;
776
+ filter: color-to-filter(var(--kfw-color-fn));
777
+ }
778
+
644
779
  /**
645
780
  * File-Upload
646
781
  */
@@ -677,56 +812,68 @@
677
812
  }
678
813
 
679
814
  .file-upload__icon {
680
- position: relative;
681
- display: block;
682
- transform: scale(1);
683
- width: 2.8rem;
684
- height: 1.3rem;
685
- border: 0.3rem solid var(--kfw-color-fn);
686
- border-top: 0;
687
- margin-block: 2.5rem 2rem;
815
+ width: 4rem;
816
+ height: 4rem;
817
+ margin: 2rem;
818
+ filter: color-to-filter(var(--kfw-color-fn));
688
819
  }
689
820
 
690
- .file-upload__icon::before,
691
- .file-upload__icon::after {
692
- content: "";
693
- display: block;
694
- position: absolute;
821
+ /**
822
+ * Containers
823
+ */
824
+ :is(.container, .container-fluid, .container-narrow, .container-extended, .container-extended-fullwidth) {
825
+ margin-inline: auto;
826
+ width: 100%;
695
827
  }
696
828
 
697
- .file-upload__icon::before {
698
- left: 1rem;
699
- bottom: 0.4rem;
700
- width: 0.3rem;
701
- height: 1.9rem;
702
- background-color: var(--kfw-color-fn);
829
+ :is(.container, .container-fluid, .container-narrow, .container-extended) {
830
+ padding-inline: var(--kfw-safezone);
703
831
  }
704
832
 
705
- .file-upload__icon::after {
706
- bottom: 0.7rem;
707
- left: 0.35rem;
708
- width: 1.6rem;
709
- height: 1.6rem;
710
- transform: rotate(45deg);
711
- border-left: 0.3rem solid var(--kfw-color-fn);
712
- border-top: 0.3rem solid var(--kfw-color-fn);
833
+ .container {
834
+ max-width: var(--kfw-contentwrapper-basic);
713
835
  }
714
836
 
715
- .file-upload-table {
837
+ .container-narrow {
838
+ max-width: var(--kfw-contentwrapper-narrow);
839
+ }
840
+
841
+ .container-extended {
842
+ max-width: var(--kfw-contentwrapper-extended);
843
+ }
844
+
845
+ .container-extended-fullwidth {
846
+ max-width: var(--kfw-contentwrapper-extended);
847
+ }
848
+
849
+ [class^="container"] > section {
850
+ margin-block: var(--kfw-space-large) var(--kfw-space-large);
851
+ }
852
+
853
+ /**
854
+ * Overflow auto (e.g. for code blocks, tables)
855
+ */
856
+ .overflow-auto {
857
+ overflow: auto;
858
+ }
859
+ }
860
+
861
+ @layer variations {
862
+ table.file-upload-table {
716
863
  margin-top: var(--kfw-space-medium);
717
864
  }
718
865
 
719
- .file-upload-table table {
866
+ table.file-upload-table table {
720
867
  border-top: 0;
721
868
  min-height: 10px;
722
869
  min-width: 500px;
723
870
  }
724
871
 
725
- .file-upload-table .invalid-feedback {
872
+ table.file-upload-table .invalid-feedback {
726
873
  margin-block-start: 0;
727
874
  }
728
875
 
729
- .file-upload-table tr {
876
+ table.file-upload-table tr {
730
877
  --name: calc(100% - var(--size) - var(--action));
731
878
  --size: 30%;
732
879
  --action: 15%;
@@ -737,62 +884,22 @@
737
884
  border-top: var(--kfw-borderwidth) solid var(--kfw-color-line-10);
738
885
  }
739
886
 
740
- .file-upload-table tr:not(:last-of-type) {
887
+ table.file-upload-table tr:not(:last-of-type) {
741
888
  border-bottom: 0;
742
889
  }
743
890
 
744
891
  @media (--kfw-breakpoint-mobile) {
745
- .file-upload-table tr {
892
+ table.file-upload-table tr {
746
893
  --size: 25%;
747
894
  --action: 25%;
748
895
  }
749
896
  }
750
897
 
751
898
  @media (--kfw-breakpoint-desktop) {
752
- .file-upload-table tr {
899
+ table.file-upload-table tr {
753
900
  --action: 20%;
754
901
  }
755
902
  }
756
-
757
- /**
758
- * Containers
759
- */
760
- :is(.container, .container-fluid, .container-narrow, .container-extended, .container-extended-fullwidth) {
761
- margin-inline: auto;
762
- width: 100%;
763
- }
764
-
765
- :is(.container, .container-fluid, .container-narrow, .container-extended) {
766
- padding-inline: var(--kfw-safezone);
767
- }
768
-
769
- .container {
770
- max-width: var(--kfw-contentwrapper-basic);
771
- }
772
-
773
- .container-narrow {
774
- max-width: var(--kfw-contentwrapper-narrow);
775
- }
776
-
777
- .container-extended {
778
- max-width: var(--kfw-contentwrapper-extended);
779
- }
780
-
781
- .container-extended-fullwidth {
782
- max-width: var(--kfw-contentwrapper-extended);
783
- }
784
-
785
- [class^="container"] > section {
786
- margin-block: var(--kfw-space-large) var(--kfw-space-large);
787
- }
788
-
789
- /**
790
- * Overflow auto (e.g. for code blocks, tables)
791
- */
792
- .overflow-auto,
793
- .file-upload-table {
794
- overflow: auto;
795
- }
796
903
  }
797
904
  }
798
905
 
@@ -814,14 +921,18 @@
814
921
  gap: var(--kfw-space-medium);
815
922
  }
816
923
 
817
- .header img {
818
- width: auto;
819
- }
820
-
821
924
  .header__menu {
822
925
  text-align: end;
823
926
  }
824
927
 
928
+ .header__menu .icon {
929
+ margin: 1.2rem 0.8rem;
930
+ }
931
+
932
+ :where(.header-logo-mobile, .header-logo-desktop img) {
933
+ width: auto;
934
+ }
935
+
825
936
  .header-logo-mobile {
826
937
  height: 2.8rem;
827
938
  }
@@ -858,36 +969,11 @@
858
969
  --kfw-focusring-outline-color: var(--kfw-color-background);
859
970
 
860
971
  border-top: var(--kfw-base-borderwidth-md) solid var(--kfw-color-line-11);
861
- background-color: var(--kfw-color-background-dark-blue);
862
- color: var(--kfw-color-text-on-dark-bg);
863
972
  font-size: var(--kfw-fontsize-small);
864
973
  line-height: var(--kfw-lineheight);
865
974
  padding-block: var(--kfw-space-medium) var(--kfw-space-large);
866
975
  }
867
976
 
868
- .footer .button--secondary {
869
- /* use the same styles as .bg-dark .button--secondary */
870
- --button-color: var(--kfw-color-text-on-dark-bg);
871
- --button-border-color: var(--kfw-color-text-on-dark-bg);
872
- --button-bg-hover: var(--kfw-color-text-on-dark-bg);
873
- --button-color-hover: var(--kfw-color-text);
874
- --button-border-color-hover: var(--kfw-color-text-on-dark-bg);
875
- }
876
-
877
- .footer :where(a:not([role="button"])),
878
- .footer [role="link"] {
879
- /* use the same styles as .bg-dark a */
880
- --link-color: var(--kfw-color-text-on-dark-bg);
881
- --link-color-hover: var(--kfw-color-text-on-dark-bg);
882
-
883
- text-decoration: underline;
884
- }
885
-
886
- .footer a:not([role="button"]):where(:hover, :focus, :active, [aria-current]:not([aria-current="false"])),
887
- .footer [role="link"]:where(:hover, :focus, :active, [aria-current]:not([aria-current="false"])) {
888
- text-decoration: none;
889
- }
890
-
891
977
  .footer > * {
892
978
  align-items: baseline;
893
979
  display: flex;
@@ -944,13 +1030,24 @@
944
1030
  width: 100%;
945
1031
  }
946
1032
 
947
- @media (--kfw-breakpoint-desktop) {
1033
+ @media (--kfw-breakpoint-mobile) {
948
1034
  .hero__bars {
949
- width: var(--hero-content-desktop-width);
950
- position: absolute;
951
- top: 4rem;
952
- left: 4rem;
953
- bottom: 4rem;
1035
+ display: none;
1036
+ }
1037
+ }
1038
+
1039
+ .hero__bars-desktop {
1040
+ display: none;
1041
+ width: var(--hero-content-desktop-width);
1042
+ position: absolute;
1043
+ top: 4rem;
1044
+ left: 4rem;
1045
+ bottom: 4rem;
1046
+ }
1047
+
1048
+ @media (--kfw-breakpoint-mobile) {
1049
+ .hero__bars-desktop {
1050
+ display: block;
954
1051
  }
955
1052
  }
956
1053
 
@@ -964,7 +1061,7 @@
964
1061
  background-color: var(--kfw-color-background-light-blue);
965
1062
  }
966
1063
 
967
- @media (--kfw-breakpoint-desktop) {
1064
+ @media (--kfw-breakpoint-mobile) {
968
1065
  .hero__title {
969
1066
  flex-direction: row;
970
1067
  position: absolute;
@@ -989,7 +1086,7 @@
989
1086
  }
990
1087
 
991
1088
  @layer variations {
992
- .bg-dark {
1089
+ :where(.bg-dark, .footer) {
993
1090
  --headline-color: var(--kfw-color-text-headline-on-dark-bg);
994
1091
  --kfw-focusring-outline-color: var(--kfw-color-background);
995
1092
 
@@ -997,20 +1094,26 @@
997
1094
  color: var(--kfw-color-text-on-dark-bg);
998
1095
  }
999
1096
 
1000
- .bg-dark :where(a:not([role="button"])),
1001
- .bg-dark [role="link"] {
1097
+ :where(.bg-dark, .footer) :where(a:not([role="button"]), [role="link"]) {
1002
1098
  --link-color: var(--kfw-color-text-on-dark-bg);
1003
1099
  --link-color-hover: var(--kfw-color-text-on-dark-bg);
1004
1100
 
1005
1101
  text-decoration: underline;
1006
1102
  }
1007
1103
 
1008
- .bg-dark :where(a:not([role="button"])):is([aria-current]:not([aria-current="false"]), :hover, :active, :focus),
1009
- .bg-dark [role="link"]:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
1104
+ :where(.bg-dark, .footer) :where(a:not([role="button"]), [role="link"]):is(:hover, :focus, :active) {
1010
1105
  text-decoration: none;
1011
1106
  }
1012
1107
 
1013
- .bg-dark .button--primary {
1108
+ :where(.bg-dark, .footer) :where([role="link"], a:not([role="button"])) .icon {
1109
+ filter: color-to-filter(var(--kfw-color-text-on-dark-bg));
1110
+ }
1111
+
1112
+ :where(.bg-dark, .footer) :where(button, [type="submit"], [type="reset"], [type="button"], [role="button"]) .icon {
1113
+ filter: color-to-filter(var(--kfw-color-text-on-dark-bg));
1114
+ }
1115
+
1116
+ :where(.bg-dark, .footer) :where(.button--primary, [type="submit"]) {
1014
1117
  --button-color: var(--kfw-color-fn);
1015
1118
  --button-bg: var(--kfw-color-text-on-dark-bg);
1016
1119
  --button-border-color: var(--kfw-color-text-on-dark-bg);
@@ -1019,7 +1122,11 @@
1019
1122
  --button-border-color-hover: var(--kfw-color-text-on-dark-bg);
1020
1123
  }
1021
1124
 
1022
- .bg-dark .button--secondary {
1125
+ :where(.bg-dark, .footer) :where(.button--primary, [type="submit"]) .icon {
1126
+ filter: color-to-filter(var(--kfw-color-fn));
1127
+ }
1128
+
1129
+ :where(.bg-dark, .footer) :where(.button--secondary, [type="reset"]) {
1023
1130
  --button-color: var(--kfw-color-text-on-dark-bg);
1024
1131
  --button-border-color: var(--kfw-color-text-on-dark-bg);
1025
1132
  --button-bg-hover: var(--kfw-color-text-on-dark-bg);
@@ -1027,7 +1134,15 @@
1027
1134
  --button-border-color-hover: var(--kfw-color-text-on-dark-bg);
1028
1135
  }
1029
1136
 
1030
- .bg-dark .button--tertiary {
1137
+ :where(.bg-dark, .footer) :where(.button--secondary, [type="reset"]) .icon {
1138
+ filter: color-to-filter(var(--kfw-color-text-on-dark-bg));
1139
+ }
1140
+
1141
+ :where(.bg-dark, .footer) :where(.button--secondary, [type="reset"]):is(:hover, :focus) .icon {
1142
+ filter: color-to-filter(var(--kfw-color-text));
1143
+ }
1144
+
1145
+ :where(.bg-dark, .footer) .button--tertiary {
1031
1146
  --button-color: var(--kfw-color-text-on-dark-bg);
1032
1147
  --button-color-hover: var(--kfw-color-text-on-dark-bg);
1033
1148
  }
package/demo/src/vendor/gen-custom-media.css CHANGED
@@ -1,4 +1,4 @@
1
- /* Custom Media Queries generated from KfW Design Tokens v0.5.1 */
1
+ /* Custom Media Queries generated from KfW Design Tokens v0.5.4 */
2
2
 
3
3
  /* See: https://www.w3.org/TR/mediaqueries-5/#at-ruledef-custom-media */
4
4
 
package/output/css/kfw-design-tokens.light.css CHANGED
@@ -1,5 +1,5 @@
1
1
  /**
2
- * KfW Design Tokens v0.5.4 | MPL-2.0 | https://github.com/openkfw/design-tokens
2
+ * KfW Design Tokens v0.5.6 | MPL-2.0 | https://github.com/openkfw/design-tokens
3
3
  */
4
4
 
5
5
  :root, :host, .kfw-theme--light { color-scheme: light; }
package/output/js/kfw-design-tokens.light.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  /**
2
- * KfW Design Tokens v0.5.4 | MPL-2.0 | https://github.com/openkfw/design-tokens
2
+ * KfW Design Tokens v0.5.6 | MPL-2.0 | https://github.com/openkfw/design-tokens
3
3
  */
4
4
 
5
5
  export const KfwBaseColorBlue100: {
package/output/js/kfw-design-tokens.light.js CHANGED
@@ -1,5 +1,5 @@
1
1
  /**
2
- * KfW Design Tokens v0.5.4 | MPL-2.0 | https://github.com/openkfw/design-tokens
2
+ * KfW Design Tokens v0.5.6 | MPL-2.0 | https://github.com/openkfw/design-tokens
3
3
  */
4
4
 
5
5
  export const KfwBaseColorBlue100 = {
package/output/scss/kfw-design-tokens.light.scss CHANGED
@@ -1,5 +1,5 @@
1
1
 
2
- // KfW Design Tokens v0.5.4 | MPL-2.0 | https://github.com/openkfw/design-tokens
2
+ // KfW Design Tokens v0.5.6 | 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;
package/output/web_thirdparty_16px/css/kfw-design-tokens.light.css CHANGED
@@ -1,5 +1,5 @@
1
1
  /**
2
- * KfW Design Tokens v0.5.4 | MPL-2.0 | https://github.com/openkfw/design-tokens
2
+ * KfW Design Tokens v0.5.6 | MPL-2.0 | https://github.com/openkfw/design-tokens
3
3
  */
4
4
 
5
5
  :root, :host, .kfw-theme--light { color-scheme: light; }
package/output/web_thirdparty_16px/js/kfw-design-tokens.light.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  /**
2
- * KfW Design Tokens v0.5.4 | MPL-2.0 | https://github.com/openkfw/design-tokens
2
+ * KfW Design Tokens v0.5.6 | MPL-2.0 | https://github.com/openkfw/design-tokens
3
3
  */
4
4
 
5
5
  export const KfwBaseColorBlue100: {
package/output/web_thirdparty_16px/js/kfw-design-tokens.light.js CHANGED
@@ -1,5 +1,5 @@
1
1
  /**
2
- * KfW Design Tokens v0.5.4 | MPL-2.0 | https://github.com/openkfw/design-tokens
2
+ * KfW Design Tokens v0.5.6 | MPL-2.0 | https://github.com/openkfw/design-tokens
3
3
  */
4
4
 
5
5
  export const KfwBaseColorBlue100 = {
package/output/web_thirdparty_16px/scss/kfw-design-tokens.light.scss CHANGED
@@ -1,5 +1,5 @@
1
1
 
2
- // KfW Design Tokens v0.5.4 | MPL-2.0 | https://github.com/openkfw/design-tokens
2
+ // KfW Design Tokens v0.5.6 | 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;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@openkfw/design-tokens",
3
- "version": "0.5.4",
3
+ "version": "0.5.6",
4
4
  "description": "The source of truth for KfW-branded digital products.",
5
5
  "files": [
6
6
  "README.md",
@@ -8,9 +8,10 @@
8
8
  "output",
9
9
  "tokens/tokens.json",
10
10
  "tokens/gen-tokens.dark.json5",
11
+ "demo/dist/css/style.min.css",
11
12
  "demo/src/style.css",
12
13
  "demo/src/vendor/**.css",
13
- "demo/dist/css/style.min.css"
14
+ "demo/scripts/**.js"
14
15
  ],
15
16
  "scripts": {
16
17
  "start": "concurrently \"npm run watch:extended\" \"npm run watch\"",
@@ -41,8 +42,8 @@
41
42
  },
42
43
  "devDependencies": {
43
44
  "@eslint/js": "^9.39.1",
44
- "@tsconfig/node22": "^22.0.5",
45
- "@types/lodash": "^4.17.20",
45
+ "@tsconfig/node24": "^24.0.3",
46
+ "@types/lodash": "^4.17.21",
46
47
  "@types/node": "^24.10.1",
47
48
  "concurrently": "^9.2.1",
48
49
  "deep-get-set-ts": "^1.1.2",
@@ -50,11 +51,11 @@
50
51
  "json5": "^2.2.3",
51
52
  "jsoneditor-cli": "^1.1.0",
52
53
  "lodash": "4.17.21",
53
- "prettier": "^3.6.2",
54
+ "prettier": "^3.7.3",
54
55
  "style-dictionary": "^5.1.1",
55
- "tsx": "^4.20.6",
56
+ "tsx": "^4.21.0",
56
57
  "typescript": "^5.9.3",
57
- "typescript-eslint": "^8.47.0",
58
+ "typescript-eslint": "^8.48.0",
58
59
  "npm-check-updates": "^19.1.2"
59
60
  }
60
61
  }