@openkfw/design-tokens 0.5.4 → 0.5.5
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.
- package/LICENSE +1 -3
- package/README.md +1 -3
- package/demo/dist/css/style.min.css +1 -1
- package/demo/src/style.css +313 -190
- package/demo/src/vendor/gen-custom-media.css +1 -1
- package/output/css/kfw-design-tokens.light.css +1 -1
- package/output/js/kfw-design-tokens.light.d.ts +1 -1
- package/output/js/kfw-design-tokens.light.js +1 -1
- package/output/scss/kfw-design-tokens.light.scss +1 -1
- package/output/web_thirdparty_16px/css/kfw-design-tokens.light.css +1 -1
- package/package.json +8 -7
package/LICENSE
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
Copyright (c) 2025 KfW Bankengruppe
|
|
2
2
|
|
|
3
|
-
|
|
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
|
-
|
|
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?
|
|
@@ -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(16%) sepia(13%) saturate(296%) hue-rotate(156deg) brightness(96%) contrast(90%)}.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(12%) sepia(88%) saturate(4049%) hue-rotate(335deg) brightness(101%) contrast(106%)}: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}}[type=date],[type=time]{appearance:none;position:relative;padding-right:3.6rem}[type=date]::-webkit-calendar-picker-indicator,[type=time]::-webkit-calendar-picker-indicator,[type=time]::-webkit-inner-spin-button{display:none}[type=date]{background-size:1.8rem auto;background-repeat:no-repeat;background-position:right 1rem center;background-image:var(--kfw-icon-calendar-fn)}[type=time]{background-size:1.8rem auto;background-repeat:no-repeat;background-position:right 1rem center;background-image: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){justify-content:flex-start;align-items:center;gap:.5rem}:where(a,[role=link],button,[type=button]) .icon{filter:brightness(0) saturate(100%) invert(23%) sepia(73%) saturate(1448%) hue-rotate(175deg) brightness(97%) contrast(100%)}:where(a,[role=link],button,[type=button]):is(:hover,:focus) .icon{filter:brightness(0) saturate(100%) invert(17%) sepia(66%) saturate(1809%) hue-rotate(178deg) brightness(100%) contrast(101%)}button,[type=submit],[type=reset],[type=button],[role=button],[type=file]::file-selector-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-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(0%) saturate(0%) hue-rotate(141deg) brightness(108%) contrast(101%)}.button--secondary .icon{filter:brightness(0) saturate(100%) invert(21%) sepia(98%) saturate(1179%) hue-rotate(176deg) brightness(98%) contrast(101%)}.button--primary:is(:hover,:focus) .icon{filter:brightness(0) saturate(100%) invert(100%) sepia(64%) saturate(104%) hue-rotate(292deg) brightness(112%) contrast(102%)}.button--secondary:is(:hover,:focus) .icon{filter:brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(7489%) hue-rotate(255deg) brightness(103%) contrast(100%)}[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);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(22%) sepia(54%) saturate(2468%) hue-rotate(179deg) brightness(97%) 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(22%) sepia(96%) saturate(1056%) hue-rotate(174deg) brightness(98%) contrast(101%)}: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){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(100%) saturate(0%) hue-rotate(11deg) brightness(104%) contrast(104%)}: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(7465%) hue-rotate(139deg) brightness(105%) contrast(100%)}:where(.bg-dark,.footer) :where(.button--primary,[type=submit]){--button-color: var(--kfw-color-fn);--button-bg: var(--kfw-color-text-on-dark-bg);--button-border-color: var(--kfw-color-text-on-dark-bg);--button-bg-hover: var(--kfw-color-text-on-dark-bg);--button-color-hover: var(--button-color);--button-border-color-hover: var(--kfw-color-text-on-dark-bg)}:where(.bg-dark,.footer) :where(.button--primary,[type=submit]) .icon{filter:brightness(0) saturate(100%) invert(26%) sepia(39%) saturate(1502%) hue-rotate(164deg) brightness(106%) contrast(109%)}: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(90%) sepia(100%) saturate(0%) hue-rotate(161deg) brightness(107%) contrast(101%)}:where(.bg-dark,.footer) :where(.button--secondary,[type=reset]):is(:hover,:focus) .icon{filter:brightness(0) saturate(100%) invert(19%) sepia(9%) saturate(346%) hue-rotate(144deg) brightness(95%) contrast(97%)}: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/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.
|
|
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(
|
|
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")
|
|
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
|
-
*
|
|
302
|
+
* Icon
|
|
284
303
|
*/
|
|
285
|
-
|
|
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
|
-
|
|
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,15 +562,69 @@
|
|
|
542
562
|
}
|
|
543
563
|
}
|
|
544
564
|
|
|
545
|
-
|
|
546
|
-
|
|
547
|
-
|
|
565
|
+
[type="date"],
|
|
566
|
+
[type="time"] {
|
|
567
|
+
appearance: none;
|
|
568
|
+
position: relative;
|
|
569
|
+
padding-right: 3.6rem;
|
|
570
|
+
}
|
|
571
|
+
|
|
572
|
+
[type="date"]::-webkit-calendar-picker-indicator,
|
|
573
|
+
[type="time"]::-webkit-calendar-picker-indicator,
|
|
574
|
+
[type="time"]::-webkit-inner-spin-button {
|
|
575
|
+
display: none;
|
|
576
|
+
}
|
|
577
|
+
|
|
578
|
+
[type="date"] {
|
|
579
|
+
background-size: 1.8rem auto;
|
|
580
|
+
background-repeat: no-repeat;
|
|
581
|
+
background-position: right 1rem center;
|
|
582
|
+
background-image: var(--kfw-icon-calendar-fn);
|
|
583
|
+
}
|
|
584
|
+
|
|
585
|
+
[type="time"] {
|
|
586
|
+
background-size: 1.8rem auto;
|
|
587
|
+
background-repeat: no-repeat;
|
|
588
|
+
background-position: right 1rem center;
|
|
589
|
+
background-image: var(--kfw-icon-time-fn);
|
|
590
|
+
}
|
|
591
|
+
|
|
592
|
+
:where(a:not([role="button"]), [role="link"]) {
|
|
593
|
+
--link-color: var(--kfw-color-fn);
|
|
594
|
+
--link-color-hover: var(--kfw-color-fn-active);
|
|
595
|
+
|
|
596
|
+
color: var(--link-color);
|
|
597
|
+
text-decoration: none;
|
|
598
|
+
border-radius: var(--kfw-borderradius);
|
|
599
|
+
display: inline-flex;
|
|
600
|
+
vertical-align: top;
|
|
601
|
+
}
|
|
602
|
+
|
|
603
|
+
:where(a:not([role="button"]), [role="link"]):is(:hover, :focus, :active) {
|
|
604
|
+
color: var(--link-color-hover);
|
|
605
|
+
text-decoration: underline;
|
|
606
|
+
}
|
|
607
|
+
|
|
608
|
+
:where(a:not([role="button"]), [role="link"]):has(.icon) {
|
|
609
|
+
justify-content: flex-start;
|
|
610
|
+
align-items: center;
|
|
611
|
+
gap: 0.5rem;
|
|
612
|
+
}
|
|
613
|
+
|
|
614
|
+
:where(a, [role="link"], button, [type="button"]) .icon {
|
|
615
|
+
filter: color-to-filter(var(--kfw-color-fn));
|
|
616
|
+
}
|
|
617
|
+
|
|
618
|
+
:where(a, [role="link"], button, [type="button"]):is(:hover, :focus) .icon {
|
|
619
|
+
filter: color-to-filter(var(--kfw-color-fn-active));
|
|
620
|
+
}
|
|
621
|
+
|
|
548
622
|
button,
|
|
549
623
|
[type="submit"],
|
|
550
624
|
[type="reset"],
|
|
551
625
|
[type="button"],
|
|
552
|
-
[
|
|
553
|
-
[
|
|
626
|
+
[role="button"],
|
|
627
|
+
[type="file"]::file-selector-button {
|
|
554
628
|
border: var(--kfw-borderwidth) solid transparent;
|
|
555
629
|
font-family: var(--kfw-fontfamily);
|
|
556
630
|
font-size: var(--kfw-fontsize);
|
|
@@ -561,15 +635,17 @@
|
|
|
561
635
|
text-align: center;
|
|
562
636
|
text-decoration: none;
|
|
563
637
|
line-height: var(--kfw-lineheight);
|
|
564
|
-
padding: 1.2rem
|
|
638
|
+
padding-block: 1.2rem;
|
|
639
|
+
padding-inline: 2.5rem;
|
|
565
640
|
justify-content: center;
|
|
566
641
|
max-width: 100%;
|
|
567
642
|
vertical-align: middle;
|
|
568
643
|
white-space: nowrap;
|
|
569
644
|
cursor: pointer;
|
|
645
|
+
align-items: center;
|
|
570
646
|
}
|
|
571
647
|
|
|
572
|
-
.button--primary {
|
|
648
|
+
:where([type="submit"], .button--primary) {
|
|
573
649
|
--button-border-color: var(--kfw-color-fn);
|
|
574
650
|
--button-bg: var(--kfw-color-fn);
|
|
575
651
|
--button-color: var(--kfw-color-text-on-dark-bg);
|
|
@@ -582,13 +658,29 @@
|
|
|
582
658
|
border-color: var(--button-border-color);
|
|
583
659
|
}
|
|
584
660
|
|
|
585
|
-
.button--primary:is(:hover, :focus) {
|
|
661
|
+
:where([type="submit"], .button--primary):is(:hover, :focus) {
|
|
586
662
|
color: var(--button-color-hover);
|
|
587
663
|
background-color: var(--button-bg-hover);
|
|
588
664
|
border-color: var(--button-border-color-hover);
|
|
589
665
|
text-decoration: underline;
|
|
590
666
|
}
|
|
591
667
|
|
|
668
|
+
.button--primary .icon {
|
|
669
|
+
filter: color-to-filter(var(--kfw-color-text-on-dark-bg));
|
|
670
|
+
}
|
|
671
|
+
|
|
672
|
+
.button--secondary .icon {
|
|
673
|
+
filter: color-to-filter(var(--kfw-color-fn));
|
|
674
|
+
}
|
|
675
|
+
|
|
676
|
+
.button--primary:is(:hover, :focus) .icon {
|
|
677
|
+
filter: color-to-filter(var(--kfw-color-text-on-dark-bg));
|
|
678
|
+
}
|
|
679
|
+
|
|
680
|
+
.button--secondary:is(:hover, :focus) .icon {
|
|
681
|
+
filter: color-to-filter(var(--kfw-color-text-on-dark-bg));
|
|
682
|
+
}
|
|
683
|
+
|
|
592
684
|
[type="file"]::file-selector-button,
|
|
593
685
|
:is([type="reset"], .button--secondary) {
|
|
594
686
|
--button-border-color: var(--kfw-color-fn);
|
|
@@ -611,6 +703,14 @@
|
|
|
611
703
|
text-decoration: underline;
|
|
612
704
|
}
|
|
613
705
|
|
|
706
|
+
:where(.button--primary, .button--secondary):has(.icon--left) {
|
|
707
|
+
padding-inline-start: 2rem;
|
|
708
|
+
}
|
|
709
|
+
|
|
710
|
+
:where(.button--primary, .button--secondary):has(.icon--right) {
|
|
711
|
+
padding-inline-end: 2rem;
|
|
712
|
+
}
|
|
713
|
+
|
|
614
714
|
.button--tertiary {
|
|
615
715
|
--button-color: var(--kfw-color-fn);
|
|
616
716
|
--button-bg: transparent;
|
|
@@ -641,6 +741,49 @@
|
|
|
641
741
|
pointer-events: none;
|
|
642
742
|
}
|
|
643
743
|
|
|
744
|
+
.button--full {
|
|
745
|
+
width: 100%;
|
|
746
|
+
}
|
|
747
|
+
|
|
748
|
+
/**
|
|
749
|
+
* Searchfield
|
|
750
|
+
*/
|
|
751
|
+
.searchfield {
|
|
752
|
+
position: relative;
|
|
753
|
+
display: flex;
|
|
754
|
+
}
|
|
755
|
+
|
|
756
|
+
.searchfield__input {
|
|
757
|
+
width: 100%;
|
|
758
|
+
padding-right: 3rem;
|
|
759
|
+
}
|
|
760
|
+
|
|
761
|
+
.searchfield__input::-webkit-search-cancel-button {
|
|
762
|
+
appearance: none;
|
|
763
|
+
}
|
|
764
|
+
|
|
765
|
+
.searchfield__button {
|
|
766
|
+
position: absolute;
|
|
767
|
+
right: 1.5rem;
|
|
768
|
+
top: 50%;
|
|
769
|
+
transform: translateY(-50%);
|
|
770
|
+
background: none;
|
|
771
|
+
padding: 0.25rem;
|
|
772
|
+
margin: 0;
|
|
773
|
+
cursor: pointer;
|
|
774
|
+
border-radius: 1rem;
|
|
775
|
+
}
|
|
776
|
+
|
|
777
|
+
.searchfield__button:is(:hover, :focus) {
|
|
778
|
+
outline: 2px solid var(--kfw-color-fn-active);
|
|
779
|
+
}
|
|
780
|
+
|
|
781
|
+
.searchfield__icon {
|
|
782
|
+
width: 2.4rem;
|
|
783
|
+
height: 2.4rem;
|
|
784
|
+
filter: color-to-filter(var(--kfw-color-fn));
|
|
785
|
+
}
|
|
786
|
+
|
|
644
787
|
/**
|
|
645
788
|
* File-Upload
|
|
646
789
|
*/
|
|
@@ -677,56 +820,68 @@
|
|
|
677
820
|
}
|
|
678
821
|
|
|
679
822
|
.file-upload__icon {
|
|
680
|
-
|
|
681
|
-
|
|
682
|
-
|
|
683
|
-
|
|
684
|
-
height: 1.3rem;
|
|
685
|
-
border: 0.3rem solid var(--kfw-color-fn);
|
|
686
|
-
border-top: 0;
|
|
687
|
-
margin-block: 2.5rem 2rem;
|
|
823
|
+
width: 4rem;
|
|
824
|
+
height: 4rem;
|
|
825
|
+
margin: 2rem;
|
|
826
|
+
filter: color-to-filter(var(--kfw-color-fn));
|
|
688
827
|
}
|
|
689
828
|
|
|
690
|
-
|
|
691
|
-
|
|
692
|
-
|
|
693
|
-
|
|
694
|
-
|
|
829
|
+
/**
|
|
830
|
+
* Containers
|
|
831
|
+
*/
|
|
832
|
+
:is(.container, .container-fluid, .container-narrow, .container-extended, .container-extended-fullwidth) {
|
|
833
|
+
margin-inline: auto;
|
|
834
|
+
width: 100%;
|
|
835
|
+
}
|
|
836
|
+
|
|
837
|
+
:is(.container, .container-fluid, .container-narrow, .container-extended) {
|
|
838
|
+
padding-inline: var(--kfw-safezone);
|
|
695
839
|
}
|
|
696
840
|
|
|
697
|
-
.
|
|
698
|
-
|
|
699
|
-
bottom: 0.4rem;
|
|
700
|
-
width: 0.3rem;
|
|
701
|
-
height: 1.9rem;
|
|
702
|
-
background-color: var(--kfw-color-fn);
|
|
841
|
+
.container {
|
|
842
|
+
max-width: var(--kfw-contentwrapper-basic);
|
|
703
843
|
}
|
|
704
844
|
|
|
705
|
-
.
|
|
706
|
-
|
|
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);
|
|
845
|
+
.container-narrow {
|
|
846
|
+
max-width: var(--kfw-contentwrapper-narrow);
|
|
713
847
|
}
|
|
714
848
|
|
|
715
|
-
.
|
|
849
|
+
.container-extended {
|
|
850
|
+
max-width: var(--kfw-contentwrapper-extended);
|
|
851
|
+
}
|
|
852
|
+
|
|
853
|
+
.container-extended-fullwidth {
|
|
854
|
+
max-width: var(--kfw-contentwrapper-extended);
|
|
855
|
+
}
|
|
856
|
+
|
|
857
|
+
[class^="container"] > section {
|
|
858
|
+
margin-block: var(--kfw-space-large) var(--kfw-space-large);
|
|
859
|
+
}
|
|
860
|
+
|
|
861
|
+
/**
|
|
862
|
+
* Overflow auto (e.g. for code blocks, tables)
|
|
863
|
+
*/
|
|
864
|
+
.overflow-auto {
|
|
865
|
+
overflow: auto;
|
|
866
|
+
}
|
|
867
|
+
}
|
|
868
|
+
|
|
869
|
+
@layer variations {
|
|
870
|
+
table.file-upload-table {
|
|
716
871
|
margin-top: var(--kfw-space-medium);
|
|
717
872
|
}
|
|
718
873
|
|
|
719
|
-
.file-upload-table table {
|
|
874
|
+
table.file-upload-table table {
|
|
720
875
|
border-top: 0;
|
|
721
876
|
min-height: 10px;
|
|
722
877
|
min-width: 500px;
|
|
723
878
|
}
|
|
724
879
|
|
|
725
|
-
.file-upload-table .invalid-feedback {
|
|
880
|
+
table.file-upload-table .invalid-feedback {
|
|
726
881
|
margin-block-start: 0;
|
|
727
882
|
}
|
|
728
883
|
|
|
729
|
-
.file-upload-table tr {
|
|
884
|
+
table.file-upload-table tr {
|
|
730
885
|
--name: calc(100% - var(--size) - var(--action));
|
|
731
886
|
--size: 30%;
|
|
732
887
|
--action: 15%;
|
|
@@ -737,62 +892,22 @@
|
|
|
737
892
|
border-top: var(--kfw-borderwidth) solid var(--kfw-color-line-10);
|
|
738
893
|
}
|
|
739
894
|
|
|
740
|
-
.file-upload-table tr:not(:last-of-type) {
|
|
895
|
+
table.file-upload-table tr:not(:last-of-type) {
|
|
741
896
|
border-bottom: 0;
|
|
742
897
|
}
|
|
743
898
|
|
|
744
899
|
@media (--kfw-breakpoint-mobile) {
|
|
745
|
-
.file-upload-table tr {
|
|
900
|
+
table.file-upload-table tr {
|
|
746
901
|
--size: 25%;
|
|
747
902
|
--action: 25%;
|
|
748
903
|
}
|
|
749
904
|
}
|
|
750
905
|
|
|
751
906
|
@media (--kfw-breakpoint-desktop) {
|
|
752
|
-
.file-upload-table tr {
|
|
907
|
+
table.file-upload-table tr {
|
|
753
908
|
--action: 20%;
|
|
754
909
|
}
|
|
755
910
|
}
|
|
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
911
|
}
|
|
797
912
|
}
|
|
798
913
|
|
|
@@ -814,14 +929,18 @@
|
|
|
814
929
|
gap: var(--kfw-space-medium);
|
|
815
930
|
}
|
|
816
931
|
|
|
817
|
-
.header img {
|
|
818
|
-
width: auto;
|
|
819
|
-
}
|
|
820
|
-
|
|
821
932
|
.header__menu {
|
|
822
933
|
text-align: end;
|
|
823
934
|
}
|
|
824
935
|
|
|
936
|
+
.header__menu .icon {
|
|
937
|
+
margin: 1.2rem 0.8rem;
|
|
938
|
+
}
|
|
939
|
+
|
|
940
|
+
:where(.header-logo-mobile, .header-logo-desktop) {
|
|
941
|
+
width: auto;
|
|
942
|
+
}
|
|
943
|
+
|
|
825
944
|
.header-logo-mobile {
|
|
826
945
|
height: 2.8rem;
|
|
827
946
|
}
|
|
@@ -858,36 +977,11 @@
|
|
|
858
977
|
--kfw-focusring-outline-color: var(--kfw-color-background);
|
|
859
978
|
|
|
860
979
|
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
980
|
font-size: var(--kfw-fontsize-small);
|
|
864
981
|
line-height: var(--kfw-lineheight);
|
|
865
982
|
padding-block: var(--kfw-space-medium) var(--kfw-space-large);
|
|
866
983
|
}
|
|
867
984
|
|
|
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
985
|
.footer > * {
|
|
892
986
|
align-items: baseline;
|
|
893
987
|
display: flex;
|
|
@@ -944,13 +1038,24 @@
|
|
|
944
1038
|
width: 100%;
|
|
945
1039
|
}
|
|
946
1040
|
|
|
947
|
-
@media (--kfw-breakpoint-
|
|
1041
|
+
@media (--kfw-breakpoint-mobile) {
|
|
948
1042
|
.hero__bars {
|
|
949
|
-
|
|
950
|
-
|
|
951
|
-
|
|
952
|
-
|
|
953
|
-
|
|
1043
|
+
display: none;
|
|
1044
|
+
}
|
|
1045
|
+
}
|
|
1046
|
+
|
|
1047
|
+
.hero__bars-desktop {
|
|
1048
|
+
display: none;
|
|
1049
|
+
width: var(--hero-content-desktop-width);
|
|
1050
|
+
position: absolute;
|
|
1051
|
+
top: 4rem;
|
|
1052
|
+
left: 4rem;
|
|
1053
|
+
bottom: 4rem;
|
|
1054
|
+
}
|
|
1055
|
+
|
|
1056
|
+
@media (--kfw-breakpoint-mobile) {
|
|
1057
|
+
.hero__bars-desktop {
|
|
1058
|
+
display: block;
|
|
954
1059
|
}
|
|
955
1060
|
}
|
|
956
1061
|
|
|
@@ -964,7 +1069,7 @@
|
|
|
964
1069
|
background-color: var(--kfw-color-background-light-blue);
|
|
965
1070
|
}
|
|
966
1071
|
|
|
967
|
-
@media (--kfw-breakpoint-
|
|
1072
|
+
@media (--kfw-breakpoint-mobile) {
|
|
968
1073
|
.hero__title {
|
|
969
1074
|
flex-direction: row;
|
|
970
1075
|
position: absolute;
|
|
@@ -989,7 +1094,7 @@
|
|
|
989
1094
|
}
|
|
990
1095
|
|
|
991
1096
|
@layer variations {
|
|
992
|
-
.bg-dark {
|
|
1097
|
+
:where(.bg-dark, .footer) {
|
|
993
1098
|
--headline-color: var(--kfw-color-text-headline-on-dark-bg);
|
|
994
1099
|
--kfw-focusring-outline-color: var(--kfw-color-background);
|
|
995
1100
|
|
|
@@ -997,20 +1102,26 @@
|
|
|
997
1102
|
color: var(--kfw-color-text-on-dark-bg);
|
|
998
1103
|
}
|
|
999
1104
|
|
|
1000
|
-
.bg-dark :where(a:not([role="button"]))
|
|
1001
|
-
.bg-dark [role="link"] {
|
|
1105
|
+
:where(.bg-dark, .footer) :where(a:not([role="button"]), [role="link"]) {
|
|
1002
1106
|
--link-color: var(--kfw-color-text-on-dark-bg);
|
|
1003
1107
|
--link-color-hover: var(--kfw-color-text-on-dark-bg);
|
|
1004
1108
|
|
|
1005
1109
|
text-decoration: underline;
|
|
1006
1110
|
}
|
|
1007
1111
|
|
|
1008
|
-
.bg-dark :where(a:not([role="button"])
|
|
1009
|
-
.bg-dark [role="link"]:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
|
|
1112
|
+
:where(.bg-dark, .footer) :where(a:not([role="button"]), [role="link"]):is(:hover, :focus, :active) {
|
|
1010
1113
|
text-decoration: none;
|
|
1011
1114
|
}
|
|
1012
1115
|
|
|
1013
|
-
.bg-dark .button
|
|
1116
|
+
:where(.bg-dark, .footer) :where([role="link"], a:not([role="button"])) .icon {
|
|
1117
|
+
filter: color-to-filter(var(--kfw-color-text-on-dark-bg));
|
|
1118
|
+
}
|
|
1119
|
+
|
|
1120
|
+
:where(.bg-dark, .footer) :where(button, [type="submit"], [type="reset"], [type="button"], [role="button"]) .icon {
|
|
1121
|
+
filter: color-to-filter(var(--kfw-color-text-on-dark-bg));
|
|
1122
|
+
}
|
|
1123
|
+
|
|
1124
|
+
:where(.bg-dark, .footer) :where(.button--primary, [type="submit"]) {
|
|
1014
1125
|
--button-color: var(--kfw-color-fn);
|
|
1015
1126
|
--button-bg: var(--kfw-color-text-on-dark-bg);
|
|
1016
1127
|
--button-border-color: var(--kfw-color-text-on-dark-bg);
|
|
@@ -1019,7 +1130,11 @@
|
|
|
1019
1130
|
--button-border-color-hover: var(--kfw-color-text-on-dark-bg);
|
|
1020
1131
|
}
|
|
1021
1132
|
|
|
1022
|
-
.bg-dark .button--
|
|
1133
|
+
:where(.bg-dark, .footer) :where(.button--primary, [type="submit"]) .icon {
|
|
1134
|
+
filter: color-to-filter(var(--kfw-color-fn));
|
|
1135
|
+
}
|
|
1136
|
+
|
|
1137
|
+
:where(.bg-dark, .footer) :where(.button--secondary, [type="reset"]) {
|
|
1023
1138
|
--button-color: var(--kfw-color-text-on-dark-bg);
|
|
1024
1139
|
--button-border-color: var(--kfw-color-text-on-dark-bg);
|
|
1025
1140
|
--button-bg-hover: var(--kfw-color-text-on-dark-bg);
|
|
@@ -1027,7 +1142,15 @@
|
|
|
1027
1142
|
--button-border-color-hover: var(--kfw-color-text-on-dark-bg);
|
|
1028
1143
|
}
|
|
1029
1144
|
|
|
1030
|
-
.bg-dark .button--
|
|
1145
|
+
:where(.bg-dark, .footer) :where(.button--secondary, [type="reset"]) .icon {
|
|
1146
|
+
filter: color-to-filter(var(--kfw-color-text-on-dark-bg));
|
|
1147
|
+
}
|
|
1148
|
+
|
|
1149
|
+
:where(.bg-dark, .footer) :where(.button--secondary, [type="reset"]):is(:hover, :focus) .icon {
|
|
1150
|
+
filter: color-to-filter(var(--kfw-color-text));
|
|
1151
|
+
}
|
|
1152
|
+
|
|
1153
|
+
:where(.bg-dark, .footer) .button--tertiary {
|
|
1031
1154
|
--button-color: var(--kfw-color-text-on-dark-bg);
|
|
1032
1155
|
--button-color-hover: var(--kfw-color-text-on-dark-bg);
|
|
1033
1156
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@openkfw/design-tokens",
|
|
3
|
-
"version": "0.5.
|
|
3
|
+
"version": "0.5.5",
|
|
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/
|
|
14
|
+
"demo/postcss.svg-load-plugin.ts"
|
|
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/
|
|
45
|
-
"@types/lodash": "^4.17.
|
|
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.
|
|
54
|
+
"prettier": "^3.7.3",
|
|
54
55
|
"style-dictionary": "^5.1.1",
|
|
55
|
-
"tsx": "^4.
|
|
56
|
+
"tsx": "^4.21.0",
|
|
56
57
|
"typescript": "^5.9.3",
|
|
57
|
-
"typescript-eslint": "^8.
|
|
58
|
+
"typescript-eslint": "^8.48.0",
|
|
58
59
|
"npm-check-updates": "^19.1.2"
|
|
59
60
|
}
|
|
60
61
|
}
|