@openkfw/design-tokens 0.7.0 → 1.0.2
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 -1
- package/README.md +54 -30
- package/demo/dist/css/style.min.css +1 -1
- package/demo/src/App.ts +12 -0
- package/demo/src/ColorPalette.ts +84 -0
- package/demo/src/Navigation.ts +55 -0
- package/demo/src/StickyHeader.ts +40 -0
- package/demo/src/main.ts +1 -0
- package/output/css/kfw-design-tokens.light.css +1 -1
- package/output/js/kfw-design-tokens.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/output/web_thirdparty_16px/js/kfw-design-tokens.light.js +1 -1
- package/output/web_thirdparty_16px/scss/kfw-design-tokens.light.scss +1 -1
- package/package.json +5 -11
- package/demo/src/style.css +0 -2023
- package/demo/src/vendor/gen-icons.css +0 -115
- /package/demo/scripts/{build-icons.js → build-icons-css.js} +0 -0
package/LICENSE
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
Copyright (c)
|
|
1
|
+
Copyright (c) 2026 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.
|
package/README.md
CHANGED
|
@@ -9,58 +9,60 @@
|
|
|
9
9
|
|
|
10
10
|

|
|
11
11
|
|
|
12
|
-
KfW Design Tokens is the source of truth for designing KfW-branded digital products.
|
|
13
|
-
The tokens follow a template that complies with the <a href="https://tr.designtokens.org/">W3C DTCG format</a>.
|
|
12
|
+
KfW Design Tokens is the source of truth for designing KfW-branded digital products.
|
|
14
13
|
|
|
15
|
-
|
|
14
|
+
The tokens follow the <a href="https://www.designtokens.org/tr/2025.10/">W3C DTCG format</a>.
|
|
16
15
|
|
|
17
16
|

|
|
18
|
-

|
|
19
17
|
[](./LICENSE)
|
|
20
18
|
[](https://www.npmjs.com/package/@openkfw/design-tokens)
|
|
21
19
|

|
|
22
20
|
|
|
23
|
-
##
|
|
21
|
+
## Table of Contents
|
|
24
22
|
|
|
25
|
-
|
|
23
|
+
- [Getting Started](#-getting-started)
|
|
24
|
+
- [FAQ](#-faq)
|
|
25
|
+
- [Contributing](#️-contributing)
|
|
26
|
+
- [License](#-license)
|
|
27
|
+
|
|
28
|
+
## 🚀 Getting Started
|
|
29
|
+
|
|
30
|
+
### For designers
|
|
31
|
+
|
|
32
|
+
- Download the **prebuilt CSS** or **Figma/Penpot-compatible token files** from the `/output` directory.
|
|
33
|
+
- Import them directly into your project or design tool. For Figma use [Token Forge](https://www.figma.com/files/team/917113827271362612/resources/community/plugin/1566133735926608173/token-forge-variables-tokens-builder?fuid=917113818148995313)
|
|
34
|
+
|
|
35
|
+
### For developers
|
|
36
|
+
|
|
37
|
+
**1. Install the package**
|
|
26
38
|
|
|
27
39
|
```bash
|
|
28
40
|
npm install -D @openkfw/design-tokens
|
|
29
41
|
```
|
|
30
42
|
|
|
31
|
-
Import tokens
|
|
43
|
+
**2. Import tokens in your CSS**
|
|
32
44
|
|
|
33
45
|
```css
|
|
34
46
|
@import url("@openkfw/design-tokens/output/css/kfw-design-tokens.light.css");
|
|
35
47
|
```
|
|
36
48
|
|
|
37
|
-
|
|
49
|
+
**3. Use design tokens**
|
|
38
50
|
|
|
39
51
|
```css
|
|
40
|
-
|
|
41
|
-
|
|
52
|
+
.cta {
|
|
53
|
+
background-color: var(--kfw-color-fn);
|
|
54
|
+
font-size: var(--kfw-fontsize);
|
|
55
|
+
border-radius: var(--kfw-borderradius-small);
|
|
56
|
+
padding-block: var(--kfw-base-space-static-20); /* use base tokens (primitives) only for a new functional case */
|
|
57
|
+
}
|
|
42
58
|
```
|
|
43
59
|
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
Considering supporting with your contribution? Whether you like to contribute new patterns, fix a bug, spotted a typo or have ideas for improvement - we'd love to hear from you. Our commitment to open source encourages contributions from everyone.
|
|
47
|
-
|
|
48
|
-
## 📒 License
|
|
49
|
-
|
|
50
|
-
Copyright (c) 2025 KfW Bankengruppe
|
|
51
|
-
|
|
52
|
-
The source code in this repository is licensed under the **Mozilla Public License 2.0 (MPL-2.0)**.
|
|
53
|
-
All KfW brand assets, including logos, icons, images, fonts, and design documentation, are **excluded** and remain the property of KfW Bankengruppe.
|
|
54
|
-
These materials may not be used, copied, or redistributed without prior written permission.
|
|
55
|
-
|
|
56
|
-
Excluded brand-related materials include:
|
|
60
|
+
**4. Use the prebuilt `demo` (CSS boilerplate) (optional):**
|
|
57
61
|
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
See the full MPL-2.0 license in [LICENSE](./LICENSE).
|
|
62
|
+
```css
|
|
63
|
+
/* Make sure to import fonts.css yourself before */
|
|
64
|
+
@import url("@openkfw/design-tokens/demo/dist/css/style.min.css");
|
|
65
|
+
```
|
|
64
66
|
|
|
65
67
|
## 💁 FAQ
|
|
66
68
|
|
|
@@ -121,5 +123,27 @@ In Tailwind CSS v4, you can either:
|
|
|
121
123
|
|
|
122
124
|
Currently, Figma does not natively support importing W3C design tokens.
|
|
123
125
|
Therefore, we export our design tokens into a Figma-compatible format, inspired by the approach used in the "Token Studio" plugin.
|
|
126
|
+
|
|
124
127
|
Although the Token Studio plugin offers various features, it is not required and some of its functionality comes with a cost.
|
|
125
|
-
As an alternative, you can use the free plugin
|
|
128
|
+
As an alternative, you can use the free plugin [Token Forge](https://www.figma.com/files/team/917113827271362612/resources/community/plugin/1566133735926608173/token-forge-variables-tokens-builder?fuid=917113818148995313), which allows you to easily import our design tokens in the Figma-compatible format and use them as Figma variables.
|
|
129
|
+
|
|
130
|
+
## ❤️ Contributing
|
|
131
|
+
|
|
132
|
+
Considering supporting with your contribution? Whether you like to contribute new patterns, fix a bug, spotted a typo or have ideas for improvement - we'd love to hear from you. Our commitment to open source encourages contributions from everyone.
|
|
133
|
+
|
|
134
|
+
## 📒 License
|
|
135
|
+
|
|
136
|
+
Copyright (c) 2026 KfW Bankengruppe
|
|
137
|
+
|
|
138
|
+
The source code in this repository is licensed under the **Mozilla Public License 2.0 (MPL-2.0)**.
|
|
139
|
+
All KfW brand assets, including logos, icons, images, fonts, and design documentation, are **excluded** and remain the property of KfW Bankengruppe.
|
|
140
|
+
These materials may not be used, copied, or redistributed without prior written permission.
|
|
141
|
+
|
|
142
|
+
Excluded brand-related materials include:
|
|
143
|
+
|
|
144
|
+
- trademarks, wordmarks, logos
|
|
145
|
+
- icons, images, fonts, and other design assets
|
|
146
|
+
- brand and design documentation
|
|
147
|
+
- all files under `/demo` directory
|
|
148
|
+
|
|
149
|
+
See the full MPL-2.0 license in [LICENSE](./LICENSE).
|
|
@@ -1 +1 @@
|
|
|
1
|
-
@layer reset,tokens,base,icons,components,utilities;@layer reset{@layer{*,*:after,*:before{box-sizing:border-box}:focus-visible{outline-offset:3px}html{-webkit-text-size-adjust:none;-moz-text-size-adjust:none;text-size-adjust:none}html{line-height:1.5}html{scrollbar-gutter:stable}h1{font-size:2em;margin-block:.67em}abbr[title]{cursor:help;text-decoration-line:underline;text-decoration-style:dotted}@media(forced-colors:active){mark{color:HighlightText;background-color:Highlight}}audio,iframe,img,svg,video{max-block-size:100%;max-inline-size:100%}fieldset{min-inline-size:0}label:has(+:where(input:not([type=radio],[type=checkbox]),select,textarea)){display:block}textarea:not([rows]){min-block-size:6em}button,input,select,textarea{font-family:inherit;font-size:inherit}[type=search]{-webkit-appearance:textfield}@supports (-webkit-touch-callout: none){[type=search]{border:1px solid -apple-system-secondary-label;background-color:canvas}}input:where([type=tel],[type=url],[type=email],[type=number]):not(:-moz-placeholder){direction:ltr}input:where([type=tel],[type=url],[type=email],[type=number]):not(:placeholder-shown){direction:ltr}table{border-collapse:collapse;border:1px solid}th,td{border:1px solid;padding:.25em .5em;vertical-align:top}dialog::backdrop{background:#0000004d}dialog,[popover],dialog::backdrop{opacity:0;transition:opacity .15s ease-out,display .15s allow-discrete,overlay .15s allow-discrete}dialog[open],:popover-open,dialog[open]::backdrop{opacity:1}@starting-style{dialog[open],:popover-open,dialog[open]::backdrop{opacity:0}}[hidden]:not([hidden=until-found]){display:none!important}img{display:block}summary{cursor:default}iframe{border:none}@supports (position-area: end){[popover]{margin:0;position-area:end span-end;position-try-fallbacks:flip-block,flip-inline,flip-block flip-inline}}}}@layer tokens{:root,:host{color-scheme:light}:root,:host{--kfw-base-color-blue-100: #e9f5fb;--kfw-base-color-blue-400: #54b3e2;--kfw-base-color-blue-500: #007abc;--kfw-base-color-blue-600: #005a8c;--kfw-base-color-blue-700: #00446e;--kfw-base-color-blue-800: #00375b;--kfw-base-color-green-100: #ecfded;--kfw-base-color-green-300: #b7f9aa;--kfw-base-color-green-400: #94eb90;--kfw-base-color-green-700: #398357;--kfw-base-color-white-90: #ffffffe6;--kfw-base-color-white-95: #fffffff2;--kfw-base-color-white: #fff;--kfw-base-color-gray-50: #f6f7f8;--kfw-base-color-gray-100: #eef0f2;--kfw-base-color-gray-200: #d8dfe3;--kfw-base-color-gray-300: #a1adb5;--kfw-base-color-gray-400: #6d767d;--kfw-base-color-gray-500-10: #41484c1a;--kfw-base-color-gray-500-30: #41484c4d;--kfw-base-color-gray-500-90: #41484ce6;--kfw-base-color-gray-500: #41484c;--kfw-base-color-gray-600: #2d3134;--kfw-base-color-violet-400: #a455c5;--kfw-base-color-violet-500: #643179;--kfw-base-color-red-400: #c80538;--kfw-base-color-yellow-500: #eac80b;--kfw-base-fontfamily-sans: "KfW Centro Sans", Arial, "Helvetica Neue", Helvetica, sans-serif;--kfw-base-fontfamily-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;--kfw-base-space-static-5: .5rem;--kfw-base-space-static-10: 1rem;--kfw-base-space-static-15: 1.5rem;--kfw-base-space-static-20: 2rem;--kfw-base-space-static-25: 2.5rem;--kfw-base-space-static-30: 3rem;--kfw-base-space-static-35: 3.5rem;--kfw-base-space-static-40: 4rem;--kfw-base-space-static-48: 4.8rem;--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-space-fluid-40-48-min: 4rem;--kfw-base-space-fluid-40-48-max: 4.8rem;--kfw-base-space-fluid-40-48-val: 1.471vi + 3.2941rem;--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.5rem;--kfw-base-fontsize-static-5xl: 2.6rem;--kfw-base-fontsize-static-6xl: 2.8rem;--kfw-base-fontsize-static-7xl: 3rem;--kfw-base-fontsize-static-8xl: 3.2rem;--kfw-base-fontsize-static-9xl: 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-xl-3xl-min: 2rem;--kfw-base-fontsize-fluid-xl-3xl-max: 2.4rem;--kfw-base-fontsize-fluid-xl-3xl-val: .588vi + 1.6471rem;--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.5rem;--kfw-base-fontsize-fluid-4xl-max: 3rem;--kfw-base-fontsize-fluid-4xl-val: .735vi + 2.0588rem;--kfw-base-fontsize-fluid-5xl-min: 2.6rem;--kfw-base-fontsize-fluid-5xl-max: 3rem;--kfw-base-fontsize-fluid-5xl-val: .588vi + 2.2471rem;--kfw-base-fontsize-fluid-6xl-min: 2.8rem;--kfw-base-fontsize-fluid-6xl-max: 3.2rem;--kfw-base-fontsize-fluid-6xl-val: .588vi + 2.4471rem;--kfw-base-fontsize-fluid-7xl-min: 3rem;--kfw-base-fontsize-fluid-7xl-max: 3.6rem;--kfw-base-fontsize-fluid-7xl-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.45;--kfw-base-lineheight-xl: 1.5;--kfw-base-borderradius-sm: 2px;--kfw-base-borderradius-md: 4px;--kfw-base-borderradius-lg: 20px;--kfw-base-borderradius-circle: 9999px;--kfw-base-borderwidth-md: 1px;--kfw-base-borderwidth-lg: 2px;--kfw-base-fontweight-regular: 400;--kfw-base-fontweight-medium: 500;--kfw-base-wordspacing-normal: 0;--kfw-base-wordspacing-wide: 1.6px;--kfw-base-letterspacing-tight: -.5px;--kfw-base-letterspacing-normal: 0;--kfw-base-letterspacing-wide: .5px;--kfw-base-letterspacing-wider: 1px;--kfw-base-offset: 2px;--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-sm: 5.625vi;--kfw-base-layout-safezone-md: 6.667vi;--kfw-base-layout-safezone-lg: 7.5vi;--kfw-base-layout-safezone-xl: 0;--kfw-base-layout-gridgap-static-xs: 1.2rem;--kfw-base-layout-gridgap-static-sm: 1.8rem;--kfw-base-layout-gridgap-static-md: 2rem;--kfw-base-layout-gridgap-static-lg: 2.2rem;--kfw-base-layout-gridgap-static-xl: 2.6rem;--kfw-base-layout-gridgap-static-2xl: 3.6rem;--kfw-base-layout-gridgap-static-3xl: 4rem;--kfw-base-layout-gridgap-fluid-basic-min: 1.2rem;--kfw-base-layout-gridgap-fluid-basic-max: 3.6rem;--kfw-base-layout-gridgap-fluid-basic-val: 3.529vi - .9176rem;--kfw-base-layout-gridgap-fluid-large-min: 2rem;--kfw-base-layout-gridgap-fluid-large-max: 4rem;--kfw-base-layout-gridgap-fluid-large-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-color-fn: #005a8c;--kfw-color-fn-active: #00446e;--kfw-color-fn-inactive: #a1adb5;--kfw-color-fn-border: #2d3134;--kfw-color-fn-label: #2d3134;--kfw-color-text: #2d3134;--kfw-color-text-on-dark-bg: #fff;--kfw-color-text-headline-on-dark-bg: #b7f9aa;--kfw-color-text-on-disabled: #fff;--kfw-color-background: #fff;--kfw-color-background-subtle: #f6f7f8;--kfw-color-background-disabled: #a1adb5;--kfw-color-background-light-blue: #e9f5fb;--kfw-color-background-light-green: #ecfded;--kfw-color-background-medium-green: #b7f9aa;--kfw-color-background-dark-blue: #00375b;--kfw-color-background-dark-green: #398357;--kfw-color-opaque-white-90: #ffffffe6;--kfw-color-opaque-white-95: #fffffff2;--kfw-color-opaque-gray-500-10: #41484c1a;--kfw-color-opaque-gray-500-30: #41484c4d;--kfw-color-opaque-gray-500-90: #41484ce6;--kfw-color-state-danger: #c80538;--kfw-color-state-success: #398357;--kfw-color-state-warning: #a455c5;--kfw-color-status-red: #c80538;--kfw-color-status-yellow: #eac80b;--kfw-color-status-green: #398357;--kfw-color-line-6: #00446e;--kfw-color-line-7: #2d3134;--kfw-color-line-8: #a1adb5;--kfw-color-line-9: #005a8c;--kfw-color-line-10: #2d3134;--kfw-color-line-11: #b7f9aa;--kfw-color-line-12: #a1adb5;--kfw-color-product-container: #f6f7f8;--kfw-color-product-benefit: #007abc;--kfw-color-product-credit: #398357;--kfw-color-product-cooperation: #643179;--kfw-color-product-credit-benefit: #41484c;--kfw-color-icon: #005a8c;--kfw-color-icon-secondary: #54b3e2;--kfw-color-icon-disabled: #398357;--kfw-color-icon-disabled-secondary: #94eb90;--kfw-fontfamily: "KfW Centro Sans", Arial, "Helvetica Neue", Helvetica, sans-serif;--kfw-fontfamily-code: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;--kfw-space-tiny: .5rem;--kfw-space-xsmall: 1rem;--kfw-space-midSmall: 1.5rem;--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-xlarge-min: 4rem;--kfw-space-xlarge-max: 4.8rem;--kfw-space-xlarge-val: 1.471vi + 3.2941rem;--kfw-space-big-min: 5rem;--kfw-space-big-max: 6rem;--kfw-space-big-val: 1.471vi + 4.1176rem;--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-large: 1.45;--kfw-lineheight-lightspeech: 1.5;--kfw-lineheight-heading: 1.3;--kfw-lineheight-heading-5: 1.333;--kfw-lineheight-small: 1.2;--kfw-borderradius: 4px;--kfw-borderradius-small: 2px;--kfw-borderradius-large: 20px;--kfw-borderradius-circle: 9999px;--kfw-borderwidth: 1px;--kfw-borderwidth-large: 2px;--kfw-borderstyle: solid;--kfw-focusring-outline-width: 2px;--kfw-focusring-outline-offset: 2px;--kfw-focusring-outline-style: dashed;--kfw-focusring-outline-color: #00446e;--kfw-focusring-outline-radius: 4px;--kfw-fontweight: 400;--kfw-fontweight-bold: 500;--kfw-wordspacing-lightspeech: 1.6px;--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-mobile: 5.625vi;--kfw-safezone-tablet: 6.667vi;--kfw-safezone-desktop: 7.5vi;--kfw-safezone-desktop-large: 0;--kfw-gridgap-basic-min: 1.2rem;--kfw-gridgap-basic-max: 3.6rem;--kfw-gridgap-basic-val: 3.529vi - .9176rem;--kfw-gridgap-large-min: 2rem;--kfw-gridgap-large-max: 4rem;--kfw-gridgap-large-val: 2.941vi + .2353rem}}@layer icons{:root,:host{--kfw-icon-alert: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' data-name='Ebene 1' viewBox='0 0 24 24'%3E%3Cpath d='M21.97 20.126a.25.25 0 0 1-.216.378H2.223a.23.23 0 0 1-.197-.346l9.77-16.548a.234.234 0 0 1 .404 0Z' style='fill:%23000;fill-rule:evenodd'/%3E%3C/svg%3E");--kfw-icon-arrow-down: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23005a8c' fill-rule='evenodd' 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' style='fill:%23005a8c'/%3E%3C/svg%3E");--kfw-icon-arrow-left: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23005a8c' fill-rule='evenodd' d='m16.148 2.146.706.706a.5.5 0 0 1 0 .706l-8.238 8.447 8.238 8.437a.5.5 0 0 1 0 .705l-.706.707a.5.5 0 0 1-.706 0l-9.296-9.496a.5.5 0 0 1 0-.706l9.296-9.506a.5.5 0 0 1 .706 0' style='fill:%23005a8c'/%3E%3C/svg%3E");--kfw-icon-arrow-right: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23005a8c' fill-rule='evenodd' d='m7.852 21.854-.706-.706a.5.5 0 0 1 0-.706l8.238-8.447-8.238-8.437a.5.5 0 0 1 0-.706l.706-.706a.5.5 0 0 1 .706 0l9.296 9.496a.5.5 0 0 1 0 .705l-9.296 9.507a.5.5 0 0 1-.706 0' style='fill:%23005a8c'/%3E%3C/svg%3E");--kfw-icon-arrow-up: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='m21.854 17.148-.706.706a.5.5 0 0 1-.706 0l-8.448-8.238-8.436 8.238a.5.5 0 0 1-.706 0l-.706-.706a.5.5 0 0 1 0-.706l9.495-9.296a.5.5 0 0 1 .706 0l9.507 9.296a.5.5 0 0 1 0 .706' style='fill:%23000'/%3E%3C/svg%3E");--kfw-icon-bullet-point-empty: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C6.478 2 2 6.478 2 12s4.478 10 10 10 10-4.478 10-10S17.522 2 12 2m0 2c4.411 0 8 3.589 8 8s-3.589 8-8 8-8-3.589-8-8 3.589-8 8-8'/%3E%3C/svg%3E");--kfw-icon-bullet-point: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C6.478 2 2 6.478 2 12s4.478 10 10 10 10-4.478 10-10S17.522 2 12 2'/%3E%3C/svg%3E");--kfw-icon-calendar: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M7.5 2a.5.5 0 0 1 .5.5V4h8V2.5c0-.277.223-.5.5-.5h1a.5.5 0 0 1 .5.5V4h3.5a.5.5 0 0 1 .5.5v17a.5.5 0 0 1-.5.5h-19a.5.5 0 0 1-.5-.5v-17c0-.277.223-.5.5-.5H6V2.5c0-.277.223-.5.5-.5ZM20 6H4v14h16zM7.5 16a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5Zm5 0a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5Zm5 0a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5Zm-10-4a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5Zm5 0a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5Zm5 0a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5Zm-10-4a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5Zm5 0a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5Zm5 0a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5Z'/%3E%3C/svg%3E");--kfw-icon-checked: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m20.854 5.852-.706-.706a.5.5 0 0 0-.706 0L9.509 15.385l-4.95-5.256a.5.5 0 0 0-.707 0l-.706.706a.5.5 0 0 0 0 .706l6.01 6.313a.5.5 0 0 0 .706 0L20.854 6.56a.5.5 0 0 0 0-.708'/%3E%3C/svg%3E");--kfw-icon-close: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23005a8c' fill-rule='evenodd' d='m5.99 4.575 6.01 6.01 6.01-6.01a.5.5 0 0 1 .708 0l.707.708a.5.5 0 0 1 0 .707L13.415 12l6.01 6.01a.5.5 0 0 1 0 .707l-.707.708a.5.5 0 0 1-.707 0l-6.012-6.012-6.01 6.012a.5.5 0 0 1-.707 0l-.707-.707a.5.5 0 0 1 0-.707l6.01-6.012-6.01-6.01a.5.5 0 0 1 0-.706l.707-.708a.5.5 0 0 1 .708 0' style='fill:%23fff'/%3E%3C/svg%3E");--kfw-icon-delete: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Ctitle%3Eicon/mülleimer%3C/title%3E%3Cpath fill='%23000' fill-rule='evenodd' d='M7 20h10V8H7zm3-14h4V3.998h-4zm10.5 0H16V2.5a.5.5 0 0 0-.5-.5h-7c-.277 0-.5.223-.5.5V6H3.5c-.277 0-.5.223-.5.5v1a.5.5 0 0 0 .5.5H5v13.5a.5.5 0 0 0 .5.5h13a.5.5 0 0 0 .5-.5V8h1.5a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5'/%3E%3C/svg%3E");--kfw-icon-dialogue: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M15 12H5.74a.5.5 0 0 0-.39.188L4 13.874V4h11zm1.5 2a.5.5 0 0 0 .5-.5V9h3v9.874l-1.35-1.686a.5.5 0 0 0-.39-.187H9v-3zM7 14v4.5a.5.5 0 0 0 .5.5h10l2.515 2.82c.095.115.235.18.383.18H21.5a.5.5 0 0 0 .5-.5v-14a.5.5 0 0 0-.5-.5H17V2.5a.5.5 0 0 0-.5-.5h-14a.5.5 0 0 0-.5.5v14a.5.5 0 0 0 .5.5h1.102a.5.5 0 0 0 .383-.18L6.5 14z'/%3E%3C/svg%3E");--kfw-icon-exclamation-mark-filled: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2c5.522 0 10 4.477 10 10s-4.478 10-10 10S2 17.523 2 12 6.478 2 12 2m.75 15h-1.5a.25.25 0 0 0-.25.25v1.5c0 .138.112.25.25.25h1.5a.25.25 0 0 0 .25-.25v-1.5a.25.25 0 0 0-.25-.25m0-12h-1.5a.25.25 0 0 0-.25.25v9.5c0 .138.112.25.25.25h1.5a.25.25 0 0 0 .25-.25v-9.5a.25.25 0 0 0-.25-.25'/%3E%3C/svg%3E");--kfw-icon-home: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 20h-5v-6.5a.5.5 0 0 0-.5-.5h-5a.5.5 0 0 0-.5.5V20H4v-8.322L12.001 4.5 20 11.678zm1.83-9.374-9.498-8.502a.5.5 0 0 0-.663.002l-9.501 8.501a.5.5 0 0 0-.168.374V21.5a.5.5 0 0 0 .5.5H11v-7.001h2V22h8.5a.5.5 0 0 0 .5-.5V11.001a.5.5 0 0 0-.17-.375'/%3E%3C/svg%3E");--kfw-icon-lock: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M7 20h10v-8H7zM9 7c0-1.654 1.345-3 3-3s3 1.346 3 3v3H9zm9.5 3H17V7c0-2.757-2.242-5-5-5S7 4.243 7 7v3H5.5a.5.5 0 0 0-.5.5v11a.5.5 0 0 0 .5.5h13a.5.5 0 0 0 .5-.5v-11c0-.277-.223-.5-.5-.5' style='fill:%23000'/%3E%3C/svg%3E");--kfw-icon-login: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M21.5 2c.28 0 .5.22.5.5v19c0 .28-.22.5-.5.5h-19c-.28 0-.5-.22-.5-.5v-6c0-.28.22-.5.5-.5h1c.28 0 .5.22.5.5V20h16V4H4v4.5c0 .28-.22.5-.5.5h-1c-.28 0-.5-.22-.5-.5v-6c0-.28.22-.5.5-.5zM10.82 6.15c.19-.19.51-.19.71 0l5.18 5.15c.19.2.29.45.29.7 0 .26-.1.51-.29.7l-5.18 5.15c-.19.19-.51.19-.71 0l-.67-.74c-.2-.2-.2-.51 0-.71l3.45-3.41H2.5c-.28 0-.5-.22-.5-.5v-.99c0-.28.22-.5.5-.5h11.1l-3.45-3.41c-.2-.2-.2-.51 0-.71l.67-.74z' style='fill:%23000'/%3E%3C/svg%3E");--kfw-icon-menu: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Ctitle%3E01_Elemente (ATOME, MOLECULES)/Icons/Funktionsicons/menü-texthinweis-DE%3C/title%3E%3Cpath fill='%23005a8c' fill-rule='evenodd' d='M18.957 14.963v2.956q0 .525.249.77.248.245.719.245a.98.98 0 0 0 .688-.239q.26-.239.259-.776l-.007-2.956h.968l-.007 2.922c.004.251-.035.501-.114.74-.07.21-.19.401-.349.557-.17.16-.374.28-.597.35a2.7 2.7 0 0 1-.858.12c-.3.007-.599-.034-.885-.12a1.5 1.5 0 0 1-.6-.35 1.36 1.36 0 0 1-.34-.557 2.4 2.4 0 0 1-.107-.74v-2.922zm-15.569.007.604 1.498.151.386a70 70 0 0 1 .339.877q.08.215.154.383h.054q.16-.39.329-.813.168-.423.329-.82.067-.141.15-.342l.084-.204.084-.21q.084-.21.168-.413.084-.201.151-.342h1.18v4.615h-.96v-3.117h-.02l-.336.853q-.087.195-.191.437a90 90 0 0 0-.414.974q-.1.242-.188.437h-.813q-.087-.203-.188-.45a84 84 0 0 0-.413-.998q-.105-.246-.198-.447l-.296-.773h-.02v1.127l-.006.831v1.126h-.955V14.97zm8.212 0v.705H9.417v1.162h1.834v.659H9.417v1.384h2.277v.705H8.416V14.97zm2.164 0 .713 1.115q.352.55.706 1.122l.583.94h.04V14.97h.961v4.615h-.992L14.213 17.1l-.115-.193-.117-.19a16 16 0 0 1-.23-.383q-.01-.001-.018.004-.003.003-.016.003v3.245h-.961V14.97zm5.442-1.13a.5.5 0 0 1 .356.115.4.4 0 0 1 .12.302.4.4 0 0 1-.12.296.5.5 0 0 1-.279.12h-.077a.45.45 0 0 1-.343-.12.41.41 0 0 1-.114-.296.4.4 0 0 1 .117-.299.46.46 0 0 1 .34-.117m1.417 0a.5.5 0 0 1 .357.115.4.4 0 0 1 .12.302.4.4 0 0 1-.12.296.5.5 0 0 1-.279.12h-.078a.44.44 0 0 1-.336-.12.41.41 0 0 1-.114-.296.4.4 0 0 1 .118-.299.45.45 0 0 1 .332-.117m.877-3.856a.5.5 0 0 1 .492.41l.008.089v.997a.5.5 0 0 1-.5.498h-19a.5.5 0 0 1-.492-.409L2 11.48v-.996a.5.5 0 0 1 .5-.499zM21.5 5a.5.5 0 0 1 .492.409l.008.09v.996a.5.5 0 0 1-.5.499h-19a.5.5 0 0 1-.492-.409L2 6.495v-.997A.5.5 0 0 1 2.5 5z'/%3E%3C/svg%3E");--kfw-icon-personal-settings: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 12c2.8 0 5-2.2 5-5s-2.2-5-5-5-5 2.2-5 5 2.2 5 5 5m0-8c1.7 0 3 1.3 3 3s-1.3 3-3 3-3-1.3-3-3 1.3-3 3-3m8.8 12.6C19.8 15.2 18 14 15 14H9c-3 0-4.8 1.2-5.8 2.6C2.2 18.1 2 19.8 2 21c0 .7.5 1 1 1h18c.5 0 1-.3 1-1 0-1.2-.2-2.9-1.2-4.4M4 20c.1-.7.3-1.5.8-2.2.8-1.2 2.1-1.8 4.1-1.8h6.2c2 0 3.3.6 4.1 1.8.5.7.7 1.5.8 2.2z'/%3E%3C/svg%3E");--kfw-icon-plus: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Ctitle%3Eicon/plus%3C/title%3E%3Cpath fill='%23000' fill-rule='evenodd' d='M19.5 11H13V4.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5V11H4.5a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5H11v6.5a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5V13h6.5a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5'/%3E%3C/svg%3E");--kfw-icon-search: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Ctitle%3Eicon/lupe%3C/title%3E%3Cpath fill='%23000' fill-rule='evenodd' d='M4 10c0-3.31 2.69-6 6-6s6 2.69 6 6-2.691 6-6 6-6-2.691-6-6m17.854 10.439-5.54-5.54A7.95 7.95 0 0 0 18 10a8 8 0 1 0-8 8 7.95 7.95 0 0 0 4.9-1.685l5.539 5.54a.5.5 0 0 0 .707 0l.708-.708a.5.5 0 0 0 0-.707'/%3E%3C/svg%3E");--kfw-icon-time: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M12 2c5.5 0 10 4.5 10 10s-4.5 10-10 10S2 17.5 2 12 6.5 2 12 2m0 2c-4.4 0-8 3.6-8 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8m.4 3c.3 0 .5.2.5.5v5.3l2.6 2.6c.2.2.2.5 0 .7l-.7.7c-.2.2-.5.2-.7 0l-3.2-3.2V7.5c0-.3.2-.5.5-.5Z'/%3E%3C/svg%3E");--kfw-icon-upload: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Ctitle%3Eicon/upload%3C/title%3E%3Cpath d='M3.5 13a.5.5 0 0 1 .5.5V20h16v-6.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v8a.5.5 0 0 1-.5.5h-19a.5.5 0 0 1-.5-.5v-8a.5.5 0 0 1 .5-.5ZM12 2a1 1 0 0 1 .703.292l6.15 6.184a.5.5 0 0 1 0 .706l-.735.671a.5.5 0 0 1-.707 0l-4.415-4.448L13 16.5a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5l.005-11.095-4.416 4.448a.5.5 0 0 1-.707 0l-.735-.67a.5.5 0 0 1 0-.707l6.15-6.184A1 1 0 0 1 12 2'/%3E%3C/svg%3E")}.icon--alert{--icon: var(--kfw-icon-alert)}.icon--arrow-down{--icon: var(--kfw-icon-arrow-down)}.icon--arrow-left{--icon: var(--kfw-icon-arrow-left)}.icon--arrow-right{--icon: var(--kfw-icon-arrow-right)}.icon--arrow-up{--icon: var(--kfw-icon-arrow-up)}.icon--bullet-point-empty{--icon: var(--kfw-icon-bullet-point-empty)}.icon--bullet-point{--icon: var(--kfw-icon-bullet-point)}.icon--calendar{--icon: var(--kfw-icon-calendar)}.icon--checked{--icon: var(--kfw-icon-checked)}.icon--close{--icon: var(--kfw-icon-close)}.icon--delete{--icon: var(--kfw-icon-delete)}.icon--dialogue{--icon: var(--kfw-icon-dialogue)}.icon--exclamation-mark-filled{--icon: var(--kfw-icon-exclamation-mark-filled)}.icon--home{--icon: var(--kfw-icon-home)}.icon--lock{--icon: var(--kfw-icon-lock)}.icon--login{--icon: var(--kfw-icon-login)}.icon--menu{--icon: var(--kfw-icon-menu)}.icon--personal-settings{--icon: var(--kfw-icon-personal-settings)}.icon--plus{--icon: var(--kfw-icon-plus)}.icon--search{--icon: var(--kfw-icon-search)}.icon--time{--icon: var(--kfw-icon-time)}.icon--upload{--icon: var(--kfw-icon-upload)}}@layer tokens{:root,:host{--kfw-space-large: clamp(var(--kfw-space-large-min), var(--kfw-space-large-val), var(--kfw-space-large-max));--kfw-space-xlarge: clamp(var(--kfw-space-xlarge-min), var(--kfw-space-xlarge-val), var(--kfw-space-xlarge-max));--kfw-space-big: clamp(var(--kfw-space-big-min), var(--kfw-space-big-val), var(--kfw-space-big-max));--kfw-gridgap-large: clamp(var(--kfw-gridgap-large-min), var(--kfw-gridgap-large-val), var(--kfw-gridgap-large-max));--kfw-gridgap-basic: clamp(var(--kfw-gridgap-basic-min), var(--kfw-gridgap-basic-val), var(--kfw-gridgap-basic-max));--kfw-safezone: var(--kfw-safezone-mobile);--headline-color: var(--kfw-color-text);--kfw-focusring-outline-color: var(--kfw-color-fn-active);--kfw-fontsize-heading-4: clamp(var(--kfw-fontsize-heading-4-min), var(--kfw-fontsize-heading-4-val), var(--kfw-fontsize-heading-4-max));--kfw-invalid-border-width: .2rem;--kfw-invalid-border-offset: 1rem}@media(min-width:600px){:root,:host{--kfw-safezone: var(--kfw-safezone-tablet)}}@media(min-width:960px){:root,:host{--kfw-safezone: var(--kfw-safezone-desktop)}}@media(min-width:1280px){:root,:host{--kfw-safezone: var(--kfw-safezone-desktop-large)}}}@layer base{:root,:host{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);font-synthesis:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;scroll-padding-block-start:5.8rem}:focus-visible{outline-offset:var(--kfw-focusring-outline-offset);outline:0 var(--kfw-focusring-outline-style) var(--kfw-focusring-outline-color)}[data-whatinput=keyboard]:not([data-whatintent=mouse]) *:focus-visible{outline-width:var(--kfw-focusring-outline-width)}body{margin:0;font-size:1.6rem}body.no-scroll{overflow:hidden;overscroll-behavior:contain;position:relative;padding-inline:0;padding-block-start:0;margin-inline:0;margin-block-start:0}:where(strong,b){font-weight:var(--kfw-fontweight-bold)}:where(small){font-size:var(--kfw-fontsize-small)}:where(sub,sup){position:relative;line-height:0;vertical-align:baseline;font-size:75%}sub{inset-block-end:-.25em}sup{inset-block-start:-.5em}:where(address,blockquote,dl,ol,p,pre,table,ul){margin-block:0 var(--kfw-space-small)}:where(address,blockquote,dl,ol,p,pre,table,ul):last-child{margin-block-end:0}mark{padding:.125rem .25rem;vertical-align:baseline;background-color:var(--kfw-color-background-medium-green);color:var(--kfw-color-text)}mark::-moz-selection{background-color:var(--kfw-color-background);color:var(--kfw-color-text)}mark::selection{background-color:var(--kfw-color-background);color:var(--kfw-color-text)}.bg-dark mark{background-color:var(--kfw-color-background);color:var(--kfw-color-text)}.bg-dark mark::-moz-selection{background-color:var(--kfw-color-background-dark-blue);color:var(--kfw-color-text-on-dark-bg)}.bg-dark mark::selection{background-color:var(--kfw-color-background-dark-blue);color:var(--kfw-color-text-on-dark-bg)}.bg-light mark{background-color:var(--kfw-color-background-dark-blue);color:var(--kfw-color-text-on-dark-bg)}.bg-light mark::-moz-selection{background-color:var(--kfw-color-background);color:var(--kfw-color-text)}.bg-light mark::selection{background-color:var(--kfw-color-background);color:var(--kfw-color-text)}blockquote{margin-inline:0}blockquote footer{margin-block-start:var(--kfw-space-tiny)}:where(cite,i,em){font-style:normal}:where(dialog),:where(dialog)::backdrop{opacity:1;transition:none}ul,ol,menu{list-style:none;padding-inline-start:0;font-weight:var(--kfw-fontweight)}ul li ul,ul li ol,ol li ul,ol li ol{margin-block-start:var(--kfw-space-xsmall);padding-inline-start:var(--kfw-space-small)}.list-item{position:relative;margin-block-end:var(--kfw-space-xsmall)}.list-item:before{position:absolute;inset-block-start:0;inset-inline-start:0;pointer-events:none;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;background-repeat:no-repeat}:where(.list--numbers,.list--letters,.list--caps,.list--icon,.list--big-checks,.list--checks,.list--bullets)>.list-item{padding-inline-start:2rem}:where(.list--numbers,.list--letters,.list--caps,.list--icon,.list--big-checks,.list--checks,.list--bullets)>.list-item:before{content:""}:where(.list--numbers,.list--letters,.list--caps,.list--icon,.list--big-checks,.list--checks,.list--bullets)>.list-item :where(ul,ol){padding-inline-start:0}:where(.list--letters,.list--caps){counter-reset:item}:where(.list--letters,.list--caps) .list-item:before{content:counter(item,lower-latin) ".";counter-increment:item;font-weight:var(--kfw-fontweight-bold)}.list--caps .list-item:before{content:counter(item,upper-latin) "."}.list--numbers{counter-reset:item-counter}.list--numbers>.list-item:before{content:counter(item-counter) ".";counter-increment:item-counter;font-weight:var(--kfw-fontweight-bold)}:where(.list--checks,.list--big-checks)>.list-item{--icon: var(--kfw-icon-checked)}.list--checks>.list-item:before{min-inline-size:var(--icon-size-sm);min-block-size:var(--icon-size-sm);-webkit-mask-image:var(--icon);mask-image:var(--icon);background-color:var(--kfw-color-background-dark-green);inset-block-start:.3rem}.list--big-checks>.list-item{--size: var(--icon-size-lg);--space: 1.5rem;padding-inline-start:calc(var(--size) + var(--space))}.list--big-checks>.list-item:before{min-inline-size:var(--size);min-block-size:var(--size);inset-block-start:-.1rem;-webkit-mask-image:var(--icon);mask-image:var(--icon);background-color:var(--kfw-color-background-dark-green)}@media(min-width:1280px){.list--big-checks>.list-item{--size: var(--icon-size-xl);--space: 1rem}.list--big-checks>.list-item:before{inset-block-start:-.3rem}}.list--icon>.list-item{--size: var(--icon-size-md);--space: 1.5rem;--icon: var(--kfw-icon-checked);margin-block-end:var(--kfw-space-small);font-weight:var(--kfw-fontweight-bold);padding-inline-start:calc(var(--size) + var(--space))}.list--icon>.list-item:before{--icon-color: var(--kfw-color-background-dark-green);min-inline-size:var(--size);min-block-size:var(--size);-webkit-mask-image:var(--icon);mask-image:var(--icon);background-color:var(--icon-color);inset-block-start:-.1rem}.list--bullets>.list-item{--icon-size-md: .7rem;padding-inline-start:calc(var(--icon-size-md) + 1rem)}.list--bullets>.list-item:before{min-inline-size:var(--icon-size-md);min-block-size:var(--icon-size-md);inset-block-start:.8rem;-webkit-mask-image:var(--kfw-icon-bullet-point);mask-image:var(--kfw-icon-bullet-point);background-color:currentcolor}.list--bullets-empty>.list-item:before{-webkit-mask-image:var(--kfw-icon-bullet-point-empty);mask-image:var(--kfw-icon-bullet-point-empty);background-color:currentcolor}table{inline-size:100%;border-collapse:collapse;border-spacing:0;border-inline-start:0;border-inline-end:0;text-indent:0;overflow:visible;border-block-start:var(--kfw-borderwidth) solid var(--kfw-color-line-10);border-block-end:var(--kfw-borderwidth-large) solid var(--kfw-color-line-7)}tr{background-color:var(--kfw-color-background)}thead tr{border-block-end:var(--kfw-borderwidth) solid var(--kfw-color-line-8)}tr:not(:last-of-type){border-block-end: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-inline-size:100%;block-size:auto;border-style:none}code,kbd,samp,pre{font-family:var(--kfw-fontfamily-code);line-height:initial}pre{display:block;margin-block:0 var(--kfw-space-small);overflow:auto;-ms-overflow-style:scrollbar}abbr[title]{-webkit-text-decoration:underline dotted;text-decoration:underline dotted;cursor:help}ins{color:var(--kfw-color-state-success);text-decoration:none}del{color:var(--kfw-color-state-danger)}:where(h1,h2,h3,h4,h5,h6,.hl--1,.hl--2,.hl--3,.hl--4,.hl--5,.hl--6){font-weight:var(--kfw-fontweight-bold);line-height:var(--kfw-lineheight-heading);margin-block-start:0;color:var(--headline-color);display:block}:where(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-space-small)}@media(min-width:1280px){:where(h1,.hl--1){letter-spacing:var(--kfw-base-letterspacing-tight)}}:where(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-space-small);letter-spacing:var(--kfw-base-letterspacing-tight)}:where(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-space-xsmall);letter-spacing:var(--kfw-base-letterspacing-tight)}@media(min-width:1280px){:where(h3,.hl--3){letter-spacing:var(--kfw-base-letterspacing-normal)}}:where(h4,.hl--4){font-size:var(--kfw-fontsize-heading-4);margin-block-end:var(--kfw-space-xsmall)}:where(h5,.hl--5){font-size:var(--kfw-fontsize-heading-5);margin-block-end:var(--kfw-space-xsmall);line-height:var(--kfw-lineheight-heading-5);letter-spacing:var(--kfw-base-letterspacing-normal)}@media(min-width:1280px){:where(h5,.hl--5){letter-spacing:var(--kfw-base-letterspacing-wide)}}:where(h6,.hl--6){font-size:var(--kfw-fontsize-heading-6);margin-block-end:var(--kfw-space-xsmall);letter-spacing:var(--kfw-base-letterspacing-wide);line-height:var(--kfw-lineheight)}:where(.form-control,.form-select){--borderhover: var(--kfw-color-fn-active);--placeholder-color: var(--kfw-color-fn);-webkit-appearance:none;-moz-appearance:none;appearance:none;inline-size:100%;block-size: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) var(--kfw-borderstyle) var(--kfw-color-fn-border);padding-inline:1.5rem;padding-block:1rem;background-color:var(--kfw-color-background);background-repeat:no-repeat}:where(.form-control::-moz-placeholder,.form-select::-moz-placeholder){color:var(--placeholder-color)}:where(.form-control::placeholder,.form-select::placeholder){color:var(--placeholder-color)}:where(.form-control:disabled,.form-select:disabled){--placeholder-color: var(--kfw-color-text);background-color:transparent;color:var(--kfw-color-text);border-color:var(--kfw-color-fn-inactive)}:where(.form-control,.form-select):hover:not(:disabled){box-shadow:0 0 0 var(--kfw-borderwidth) var(--borderhover)}:where([type=checkbox],[type=radio],.form-select):not(:disabled){cursor:pointer}:where(.form-control,.form-select)[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)}textarea.form-control{block-size:auto}.form-select{--form-control-space: 1.5rem;padding-block:0;padding-inline:var(--form-control-space) calc(var(--icon-size-md) + var(--form-control-space) * 2);background-position:center right var(--form-control-space);background-size:var(--icon-size-md) auto;background-image:var(--kfw-icon-select)}.form-select:disabled{background-image:var(--kfw-icon-select-disabled)}:where(progress,[type=checkbox],[type=radio],[type=range]){accent-color:var(--kfw-color-fn)}textarea{display:block;resize:block}fieldset{margin:0;padding:0;border:0}:where(.form-text,.invalid-feedback){--space: .5rem;white-space:pre-line;-moz-column-gap:var(--space);column-gap:var(--space);inline-size:100%;margin-block-start:var(--space);font-size:var(--kfw-fontsize-small);line-height:var(--kfw-lineheight);letter-spacing:var(--kfw-base-letterspacing-normal);display:inline-grid;grid-template-columns:auto 1fr}:where(.form-text--single,.invalid-feedback--single){margin-block-start:0}:where(.form-text--group,.invalid-feedback--group){margin-block-start:calc(var(--kfw-invalid-border-width) + var(--kfw-invalid-border-offset) + .5rem)}.invalid-feedback{color:var(--kfw-color-state-danger)}.invalid-feedback:before{content:"";display:block;inline-size:var(--icon-size-xs);color:inherit;background-color:currentcolor;-webkit-mask:var(--kfw-icon-alert) center / contain no-repeat;mask:var(--kfw-icon-alert) center / contain no-repeat;block-size:1.9rem}.invalid-border{outline:var(--kfw-invalid-border-width) solid var(--kfw-color-state-danger);outline-offset:var(--kfw-invalid-border-offset)}:where(label,.form-label){display:inline-block;margin-block-end:.8rem;font-weight:var(--kfw-fontweight-bold);color:var(--kfw-color-text)}.form-group{margin-block-end:var(--kfw-space-medium)}.list-group-form{--col-gap: 1.5rem;--field-size: 2.8rem;align-items:start;display:flex;flex-direction:column;gap:var(--kfw-space-small) var(--kfw-space-medium)}.list-group-form>li{align-items:start;display:flex;margin-block-end:0}.list-group-form label{font-weight:var(--kfw-fontweight);padding-inline-start:var(--col-gap);inline-size:100%;margin-block-end:0;display:flex;flex:1 1;flex-direction:column;padding-block-start:.4rem}.list-group-form :where([type=checkbox],[type=radio]){-webkit-appearance:none;-moz-appearance:none;appearance:none;inline-size:var(--field-size);block-size:var(--field-size);margin:0;border:var(--kfw-borderwidth) solid var(--kfw-color-text);color:var(--kfw-color-fn-active);vertical-align:middle;position:relative;display:flex;align-items:baseline;flex-shrink:0;justify-content:center;background-color:var(--kfw-color-background)}[aria-invalid=true] .list-group-form :where([type=checkbox],[type=radio]),.list-group-form :where([type=checkbox],[type=radio])[aria-invalid=true]{border-color:var(--kfw-color-state-danger);border-width:var(--kfw-borderwidth-large);color:var(--kfw-color-fn-active);outline-color:var(--kfw-color-state-danger)}.list-group-form [type=radio]{border-radius:var(--kfw-borderradius-circle)}.list-group-form [type=checkbox]{border-radius:var(--kfw-borderradius)}.list-group-form :where([type=checkbox],[type=radio]):disabled{background-color:var(--kfw-base-color-gray-100);color:var(--kfw-color-fn-inactive);border-color:var(--kfw-color-fn-inactive)}.list-group-form :where([type=checkbox],[type=radio]):before{content:none;display:block;position:absolute;inset-block-start:50%;inset-inline-start:50%;border-color:currentcolor;border-block-end-style:solid;border-inline-start-style:solid}.list-group-form [type=checkbox]:before{inline-size:1.6rem;block-size:.9rem;transform:translate(-50%,-50%) rotate(314deg);margin-block-start:-1px;border-block-end-width:.225rem;border-inline-start-width:.225rem}.list-group-form [type=radio]:before{inline-size:1.4rem;block-size:1.4rem;transform:translate(-50%,-50%);border-radius:var(--kfw-borderradius-circle);background-color:currentcolor;forced-color-adjust:none}.list-group-form :where([type=checkbox],[type=radio]):checked:before{content:""}.list-group-form :where([type=radio],[type=checkbox]):hover:not(:disabled){border-width:var(--kfw-borderwidth-large)}.list-group-form :where([type=radio],[type=checkbox]):focus-visible:not(:disabled){outline-width:var(--kfw-focusring-outline-width)}.list-group-form--with-description label{font-weight:var(--kfw-fontweight-bold)}.list-group-form--with-description label>span{font-weight:var(--kfw-fontweight)}.list-group-form>li:has(input:not(:disabled)) label{cursor:pointer}.list-group-form>li:has(.list-group-form--subgroup){flex-wrap:wrap}.list-group-form--subgroup{flex-basis:100%;margin-block-start:var(--kfw-space-small);padding-inline-start:calc(var(--field-size) + var(--col-gap))}@media(min-width:600px){.list-group-form--inline{flex-flow:row wrap}}[data-whatinput=keyboard] :where(.form-control,.form-select)[aria-invalid=true]:focus-visible{outline-color:var(--kfw-color-state-danger)}:where([type=date],[type=time])::-webkit-calendar-picker-indicator{background:transparent;inline-size:1.8rem;block-size:1.8rem}[type=date]::-webkit-calendar-picker-indicator{background-image:var(--kfw-icon-input-datepicker);background-size:var(--icon-size-md);background-repeat:no-repeat;background-position:center center}[type=time]::-webkit-calendar-picker-indicator{background-image:var(--kfw-icon-input-timepicker);background-size:var(--icon-size-md);background-repeat:no-repeat;background-position:center center}.button-group{display:flex;flex-wrap:wrap;align-items:center;gap:var(--kfw-space-small)}:where(a:not([role=button]),[role=link]){--link-color: var(--kfw-color-fn);--link-color-hover: var(--kfw-color-fn-active);--link-background: transparent;--link-border: transparent;color:var(--link-color);text-decoration:none;border-radius:var(--kfw-borderradius);display:inline-flex;vertical-align:top;padding-inline:var(--kfw-borderwidth-large);border-style:var(--kfw-borderstyle);border-width:0;border-color:var(--link-border);cursor:pointer;background-color:var(--link-background);outline:0 var(--kfw-focusring-outline-style) var(--kfw-focusring-outline-color)}:where(a:not([role=button]),[role=link]):where(:hover,:focus-visible,:active){color:var(--link-color-hover);text-decoration:underline}:where(a:not([role=button]),[role=link]):focus-visible{outline-width:var(--kfw-focusring-outline-width)}:where(a:not([role=button]),[role=link]).has-icon-only:where(:hover,:active){outline:var(--kfw-borderwidth-large) var(--kfw-borderstyle) var(--link-color-hover)}:where(a:not([role=button]),[role=link]):active{outline:var(--kfw-borderwidth) var(--kfw-borderstyle) var(--link-color-hover)}:where(a:not([role=button]),[role=link]).has-icon-only:where(:focus-visible){outline-offset:0}:where(a:not([role=button]),[role=link]):has(.icon){--space: .5rem;-moz-column-gap:var(--space);column-gap:var(--space)}p :where(a:not([role=button]),[role=link]){text-decoration:underline}p :where(a:not([role=button]),[role=link]):where(:hover,:focus-visible,:active){text-decoration:none}:where(button:not([role=link]),[role=button]){--space: .8rem;font-family:var(--kfw-fontfamily);font-weight:var(--kfw-fontweight);border-radius:var(--kfw-borderradius);display:inline-flex;-moz-column-gap:var(--space);column-gap:var(--space);text-align:center;text-decoration:none;line-height:var(--kfw-lineheight);padding-block:1.2rem;padding-inline:2.5rem;justify-content:center;max-inline-size:100%;vertical-align:middle;cursor:pointer;border-width:var(--kfw-borderwidth);border-style:solid;border-color:transparent;color:var(--kfw-color-fn);background-color:transparent}.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:where(:hover,:focus-visible,:active){text-decoration:underline}.button-primary:where(:hover,:focus-visible){color:var(--button-color-hover);background-color:var(--button-bg-hover);border-color:var(--button-border-color-hover)}.button-primary:focus-visible{outline-width:var(--kfw-focusring-outline-width)}.button-primary:active{background-color:var(--button-color);color:var(--button-bg-hover);border-color:var(--button-bg-hover)}.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)}.button-secondary:where(:hover,:focus-visible,:active){text-decoration:underline}.button-secondary:where(:hover,:focus-visible){color:var(--button-color-hover);background-color:var(--button-bg-hover);border-color:var(--button-border-color-hover)}.button-secondary:focus-visible{outline-width:var(--kfw-focusring-outline-width)}.button-secondary:active{color:var(--button-bg-hover);background-color:var(--button-color-hover);border-color:var(--button-bg-hover)}:where(.button-primary,.button-secondary).has-icon-only:where(:hover),:where(.button-secondary).has-icon-only:where(:focus-visible){color:var(--kfw-color-fn-active);background-color:var(--kfw-color-background);border:var(--kfw-borderwidth-large) var(--kfw-borderstyle) var(--kfw-color-fn-active);border-radius:var(--kfw-borderradius)}.button-primary.has-icon-only:where(:focus-visible){color:var(--kfw-color-fn-active);background-color:var(--kfw-color-background);border-width:0;border-radius:var(--kfw-borderradius)}.button-primary.has-icon-only:where(:active){border-width:var(--kfw-borderwidth)}.button-secondary.has-icon-only:where(:active){color:var(--kfw-color-text-on-dark-bg);background-color:var(--kfw-color-fn-active)}.button--icon-position-left{padding-inline-start:2rem}.button--icon-position-right{padding-inline-end:2rem}.button--small{--space: .6rem;padding-block:.8rem;padding-inline:1.6rem;font-size:var(--kfw-fontsize-small)}.button--small.button--icon-position-left{padding-inline-start:1.2rem}.button--small.button--icon-position-right{padding-inline-end:1.2rem}input:not([type=submit],[type=button],[type=reset])[disabled],select[disabled],textarea[disabled],label[aria-disabled=true],:where(fieldset[disabled]) :where(input:not([type=submit],[type=button],[type=reset]),select,textarea){pointer-events:none}.searchfield{position:relative;display:flex}.searchfield__input{inline-size:100%;padding-inline-end:3rem}.searchfield__input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}.searchfield__button{position:absolute;inset-inline-end:1.5rem;inset-block-start:50%;transform:translateY(-50%)}.file-upload{display:grid;row-gap:var(--kfw-space-medium)}.file-upload__inner{display:flex;flex-direction:column;align-items:center;padding:var(--kfw-space-small) var(--kfw-space-small) var(--kfw-space-medium);background-color:var(--kfw-color-background-light-green)}.file-upload__title{margin-block-end:var(--kfw-space-medium);font-weight:var(--kfw-fontweight);text-align:center}.file-upload__input{display:none}.file-upload__icon{color:var(--kfw-color-fn);margin-block-end:2rem}:where(.container,.container-extended,.container-narrow,.container-fluid){margin-inline:auto;inline-size:100%;padding-inline:var(--kfw-safezone)}.container{max-inline-size:var(--kfw-contentwrapper-basic)}.container-extended{max-inline-size:var(--kfw-contentwrapper-extended)}.container-narrow{max-inline-size:var(--kfw-contentwrapper-narrow)}.overflow-auto{overflow:auto}}@layer icons{:root,:host{--kfw-icon-select-disabled: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%232d3134' viewBox='0 0 24 24'%3E%3Cpath fill='%23005a8c' fill-rule='evenodd' 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' style='fill:%23005a8c'/%3E%3C/svg%3E");--kfw-icon-select: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23005a8c' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' 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' style='fill:%23005a8c'/%3E%3C/svg%3E");--kfw-icon-input-datepicker: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='%23005a8c' viewBox='0 0 24 24'%3E%3Cpath d='M7.5 2a.5.5 0 0 1 .5.5V4h8V2.5c0-.277.223-.5.5-.5h1a.5.5 0 0 1 .5.5V4h3.5a.5.5 0 0 1 .5.5v17a.5.5 0 0 1-.5.5h-19a.5.5 0 0 1-.5-.5v-17c0-.277.223-.5.5-.5H6V2.5c0-.277.223-.5.5-.5ZM20 6H4v14h16zM7.5 16a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5Zm5 0a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5Zm5 0a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5Zm-10-4a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5Zm5 0a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5Zm5 0a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5Zm-10-4a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5Zm5 0a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5Zm5 0a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5Z'/%3E%3C/svg%3E");--kfw-icon-input-timepicker: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='%23005a8c' viewBox='0 0 24 24'%3E%3Cpath d='M12 2c5.5 0 10 4.5 10 10s-4.5 10-10 10S2 17.5 2 12 6.5 2 12 2m0 2c-4.4 0-8 3.6-8 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8m.4 3c.3 0 .5.2.5.5v5.3l2.6 2.6c.2.2.2.5 0 .7l-.7.7c-.2.2-.5.2-.7 0l-3.2-3.2V7.5c0-.3.2-.5.5-.5Z'/%3E%3C/svg%3E");--kfw-icon-input-upload: 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/upload%3C/title%3E%3Cpath d='M3.5 13a.5.5 0 0 1 .5.5V20h16v-6.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v8a.5.5 0 0 1-.5.5h-19a.5.5 0 0 1-.5-.5v-8a.5.5 0 0 1 .5-.5ZM12 2a1 1 0 0 1 .703.292l6.15 6.184a.5.5 0 0 1 0 .706l-.735.671a.5.5 0 0 1-.707 0l-4.415-4.448L13 16.5a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5l.005-11.095-4.416 4.448a.5.5 0 0 1-.707 0l-.735-.67a.5.5 0 0 1 0-.707l6.15-6.184A1 1 0 0 1 12 2'/%3E%3C/svg%3E");--kfw-icon-input-upload-white: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='%23fff' viewBox='0 0 24 24'%3E%3Ctitle%3Eicon/upload%3C/title%3E%3Cpath d='M3.5 13a.5.5 0 0 1 .5.5V20h16v-6.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v8a.5.5 0 0 1-.5.5h-19a.5.5 0 0 1-.5-.5v-8a.5.5 0 0 1 .5-.5ZM12 2a1 1 0 0 1 .703.292l6.15 6.184a.5.5 0 0 1 0 .706l-.735.671a.5.5 0 0 1-.707 0l-4.415-4.448L13 16.5a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5l.005-11.095-4.416 4.448a.5.5 0 0 1-.707 0l-.735-.67a.5.5 0 0 1 0-.707l6.15-6.184A1 1 0 0 1 12 2'/%3E%3C/svg%3E");--icon-size-xs: 1.4rem;--icon-size-sm: 1.6rem;--icon-size-md: 2.4rem;--icon-size-lg: 2.8rem;--icon-size-xl: 3.2rem;--icon-size-2xl: 3.6rem;--icon-size-3xl: 4rem;--icon-size-4xl: 4.8rem;--icon-size: var(--icon-size-md);--icon-only-md: 3.6rem;--icon-only-lg: 4rem;--icon-only-xl: 5.4rem;--icon-only-2xl: 5.8rem}.icon{--size: var(--icon-size);display:inline-block;flex-shrink:0;vertical-align:top;pointer-events:none;background-color:currentcolor;min-inline-size:var(--size);min-block-size:var(--size);-webkit-mask:var(--icon) center / contain no-repeat;mask:var(--icon) center / contain no-repeat}:where(a:not([role=button]),[role=link]),:where(button:not([role=link]),[role=button]){--icon-size: var(--icon-size-sm)}.icon--sm{--size: var(--icon-size-sm)}.icon--md{--size: var(--icon-size-md)}.icon--lg{--size: var(--icon-size-lg)}.icon--xl{--size: var(--icon-size-xl)}.icon--2xl{--size: var(--icon-size-2xl)}.icon--3xl{--size: var(--icon-size-3xl)}.has-icon-only{--outer-size: var(--icon-only-md);--icon-size: var(--icon-size-md);display:inline-flex;padding:0;align-items:center;justify-content:center;inline-size:var(--outer-size);block-size:var(--outer-size)}.has-icon-only:focus-visible{outline-offset:0;border-color:transparent}.has-icon-only__inner{border-radius:var(--kfw-borderradius);outline:0 var(--kfw-borderstyle) var(--kfw-color-background)}.has-icon-only--close{--outer-size: var(--icon-only-lg);border-radius:0}@media(min-width:840px){.has-icon-only--close{--outer-size: var(--icon-only-xl)}}.has-icon-only--close:where(:hover,:focus-visible){color:var(--kfw-color-text-on-dark-bg);background-color:var(--kfw-color-fn);border-color:transparent}.has-icon-only--close:focus-visible{outline:none}.has-icon-only--close:hover .has-icon-only__inner{outline-width:var(--kfw-focusring-outline-width)}.has-icon-only--close:focus-visible .has-icon-only__inner{outline-style:var(--kfw-focusring-outline-style);outline-offset:var(--kfw-focusring-outline-offset);outline-width:var(--kfw-focusring-outline-width)}.has-icon-only--close:active .has-icon-only__inner{outline-width:var(--kfw-borderwidth);outline-style:var(--kfw-borderstyle)}}@layer components{.header{position:sticky;inset-block-start:0;z-index:20;background-color:var(--kfw-color-background)}.header:after{content:"";position:absolute;inset-inline:0;inset-block-end:0;border-block-end:var(--kfw-borderwidth) solid var(--kfw-color-line-11);pointer-events:none}@media(min-width:960px){.header :where(a,button){font-size:var(--kfw-fontsize-large)}}.header__inner{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;min-block-size:5.8rem;gap:var(--kfw-space-medium)}.header__hamburger{--outer-size: 3.6rem;inline-size:var(--outer-size);block-size:var(--outer-size);display:grid;place-items:center;padding:0;justify-content:center;align-items:center}@media(min-width:840px){.header__hamburger{--outer-size: 4.8rem}}.header__hamburger:where(:active){border-width:var(--kfw-borderwidth);border-color:var(--kfw-color-fn-active)}.header__hamburger:where(:hover):not(:active){color:var(--kfw-color-text-on-dark-bg);background-color:var(--kfw-color-fn-active);border-width:0}.header__hamburger .icon{--size: var(--icon-size-2xl)}@media(min-width:840px){.header__hamburger .icon{--size: var(--icon-size-4xl)}}.header__secondary-nav{text-align:end}.header__secondary-nav .icon{margin-block-start:0}@media(min-width:840px){.header__secondary-nav .icon{margin-inline-end:.8rem}}.header__login-text{display:none}@media(min-width:840px){.header__login-text{display:inline-flex}}.header__logo{display:block;margin:0 auto;padding:0}@media(min-width:840px){.header__logo{margin-block:3rem}.header--sticky .header__logo{margin-block:0}}:where(.header__logo-small,.header__logo-large img){inline-size:auto}.header__logo-small{block-size:2.8rem}.header__logo-large{display:none;block-size:6rem}@media(min-width:840px){.header__logo-small{display:none}.header__logo-large{display:block}}.header--sticky .header__logo-small{display:block}.header--sticky .header__logo-large{display:none}.footer{--kfw-focusring-outline-color: var(--kfw-color-background);border-block-start:var(--kfw-borderwidth) solid var(--kfw-color-line-11);line-height:var(--kfw-lineheight);padding-block:var(--kfw-space-medium) var(--kfw-space-large)}.footer>*{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;align-items:center}}.footer__copyright{flex-shrink:0;font-size:var(--kfw-fontsize-small)}.footer__list{list-style:none;padding:0;margin:0;display:flex;flex-flow:row wrap;max-inline-size:100%;gap:1.6rem var(--kfw-space-large);font-size:var(--kfw-fontsize-small)}.navigation{border:none;margin:0;padding:0;background-color:transparent;color:var(--kfw-color-text);position:fixed;inset-block-start:4rem;inset-inline-start:0;block-size:calc(100vb - 4rem);overflow:hidden}.navigation::backdrop{background-color:var(--kfw-color-opaque-gray-500-30)}.navigation__close{--outer-size: var(--icon-only-2xl);position:absolute;inset-block-start:0;inset-inline-end:0}.navigation__container{--min-width: 28rem;margin-block:0;min-inline-size:calc(var(--min-width) + var(--icon-only-2xl));padding-inline:0 var(--icon-only-2xl);inline-size:100%;max-block-size:100%;display:flex;flex-direction:column;inset-block-start:.6rem;inset-inline-end:.6rem;position:relative}.navigation__content{display:flex;flex-direction:column;flex:1;min-block-size:0}.navigation__nav{flex:1;min-block-size:0;overflow-block:auto;padding:calc(var(--kfw-focusring-outline-width) + var(--kfw-focusring-outline-offset));margin:calc(-1 * (var(--kfw-focusring-outline-width) + var(--kfw-focusring-outline-offset)))}.navigation__scroll-area{flex:1;min-block-size:0;display:flex;flex-direction:column;overflow:hidden;padding-inline:var(--kfw-base-space-static-40) var(--kfw-base-space-static-20);padding-block:0 var(--kfw-base-space-static-50)}.navigation__title{--fontsize: var(--kfw-base-fontsize-static-xl);margin:0;padding-inline:4rem 2rem;padding-block:1.4rem;position:relative;color:inherit;font-size:var(--fontsize)}@media(min-width:1280px){.navigation__title{--fontsize: var(--kfw-base-fontsize-static-2xl)}}.navigation__title:after{content:"";position:absolute;inset-inline:0;inset-block-end:0;border-block-end:var(--kfw-borderwidth) var(--kfw-borderstyle) var(--kfw-color-line-11);pointer-events:none}.navigation__subtitle{font-size:var(--kfw-fontsize-introduction);display:block;padding-block-start:1.4rem}:where(.navigation__title,.navigation__subtitle){text-align:center}@media(min-width:600px){:where(.navigation__title,.navigation__subtitle){text-align:inherit}}.navigation__list>li{border-block-end:var(--kfw-borderwidth-large) var(--kfw-borderstyle) var(--kfw-color-line-8);margin-block-end:0;padding-block:var(--kfw-space-small)}.navigation__list>li a{inline-size:100%}.auto-grid{display:grid;grid-template-columns:1fr;-moz-column-gap:var(--kfw-gridgap-large);column-gap:var(--kfw-gridgap-large)}@media(min-width:840px){.auto-grid{grid-template-columns:repeat(auto-fit,minmax(0,1fr))}}.auto-grid__item{margin-block-end:var(--kfw-space-small)}.hero{--hero-content-desktop-width: 42.9rem;position:relative}@media(max-width:600px){.hero__container{--kfw-safezone: 0}}.hero__bars{display:block;inline-size:100%}@media(min-width:600px){.hero__bars{display:none}}.hero__bars-desktop{display:none;inline-size:var(--hero-content-desktop-width);position:absolute;inset-block-start:4rem}@media(min-width:600px){.hero__bars-desktop{display:block}}.hero__title{inline-size: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;inline-size:var(--hero-content-desktop-width);background-color:var(--kfw-color-opaque-white-95);inset-block-start:calc(5rem + 25px);border-radius:0 0 var(--kfw-borderradius-large) 0;padding:2rem 3rem 3rem}}.hero__image{inline-size:100%;margin-inline:auto;display:block;-o-object-fit:cover;object-fit:cover;block-size:auto;max-inline-size:128rem}.color-palette{display:grid;grid-template-columns:1fr}@media(min-width:840px){.color-palette{grid-template-columns:repeat(auto-fit,minmax(0,1fr))}}.color-palette :where(button,[role=button]){white-space:normal}.color-palette__item{margin-block-end:var(--kfw-space-small)}.color-palette__label{text-wrap:balance;display:block;padding:.5rem;margin-block-end:0}.color-palette__container{text-align:center;padding-inline:var(--kfw-space-xsmall)}.color-palette__color{display:block;inline-size:100%;block-size:3rem;border:var(--kfw-borderwidth) solid transparent;border-inline-width:0;border-block-color:var(--kfw-color-fn-inactive);border-inline-start:var(--kfw-borderwidth) solid var(--kfw-color-fn-inactive);border-inline-end:var(--kfw-borderwidth) solid var(--kfw-color-fn-inactive)}@media(min-width:840px){.color-palette__color{border-inline-start:0;border-inline-end:0}.color-palette__item:first-child .color-palette__color{border-inline-start:var(--kfw-borderwidth) solid var(--kfw-color-fn-inactive)}.color-palette__item:last-child .color-palette__color{border-inline-end:var(--kfw-borderwidth) solid var(--kfw-color-fn-inactive)}}.spacing-demo{display:flex;flex-direction:column;gap:var(--kfw-space-xsmall);margin-block-end:var(--kfw-space-big)}.spacing-demo__item{display:flex;align-items:center;gap:var(--kfw-space-small)}.spacing-demo__visual{block-size:3rem;background-color:var(--kfw-color-fn);border-radius:var(--kfw-borderradius-small)}.spacing-demo__label{font-family:var(--kfw-fontfamily-code);font-size:var(--kfw-fontsize-small);min-inline-size:20rem}.custom-form{inline-size:100%;max-inline-size:var(--kfw-contentwrapper-narrow)}table.file-upload-table{border-block-start:0;min-block-size:1rem;min-inline-size:50rem}table.file-upload-table :where(.file-upload-table__error,.file-upload-table__success,.file-upload-table__info){grid-column:1 / span 3}table.file-upload-table :where(.form-text,.invalid-feedback,.valid-feedback){margin-block-start:0}table.file-upload-table tr{--name: calc(100% - var(--size) - var(--action));--size: 30%;--action: 15%;display:grid;grid-template-columns:var(--name) var(--size) var(--action);inline-size:100%;border-block-start:var(--kfw-borderwidth) solid var(--kfw-color-line-10)}table.file-upload-table tr:not(:last-of-type){border-block-end:0}@media(min-width:600px){table.file-upload-table tr{--size: 25%;--action: 25%}}@media(min-width:960px){table.file-upload-table tr{--action: 20%}}table.file-upload-table .file-upload-table__filename{overflow-wrap:break-word}:where(.hl--sb,.hl--tb,.hl--hb,.hl--ms){display:block;line-height:var(--kfw-lineheight-heading);letter-spacing:var(--kfw-base-letterspacing-normal);margin-block-end:var(--kfw-space-medium)}.hl--sb{font-size:var(--kfw-fontsize-introduction)}@media(min-width:1280px){.hl--sb{font-size:var(--kfw-base-fontsize-static-5xl);line-height:var(--kfw-lineheight-small)}}.hl--tb{font-size:var(--kfw-fontsize-heading-4)}@media(min-width:1280px){.hl--tb{line-height:var(--kfw-lineheight-large)}}.hl--hb{font-size:var(--kfw-fontsize-introduction)}@media(min-width:840px){.hl--hb{font-size:var(--kfw-base-fontsize-static-3xl);letter-spacing:var(--kfw-base-letterspacing-tight)}}@media(min-width:1280px){.hl--hb{font-size:var(--kfw-base-fontsize-static-5xl);line-height:var(--kfw-lineheight-small);letter-spacing:0}}.hl--ms{margin-block-end:var(--kfw-space-xsmall);font-size:var(--kfw-fontsize-introduction)}@media(min-width:840px){.hl--ms{font-size:var(--kfw-fontsize-large);line-height:var(--kfw-lineheight-heading-5)}}.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)}.tx--8{line-height:var(--kfw-lineheight-heading);letter-spacing:var(--kfw-base-letterspacing-normal);font-size:var(--kfw-fontsize-large)}}@layer utilities{: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)}:where(.bg-dark,.footer) :where(a:not([role=button]),[role=link]):where(:active){--link-background: var(--kfw-color-fn-active)}:where(.bg-dark,.footer) :where(.button-primary){--button-color: var(--kfw-color-fn-active);--button-bg: var(--kfw-color-text-on-dark-bg);--button-border-color: var(--kfw-color-text-on-dark-bg);--button-bg-hover: var(--kfw-color-text-on-dark-bg);--button-color-hover: var(--button-color);--button-border-color-hover: var(--kfw-color-text-on-dark-bg)}:where(.bg-dark,.footer) :where(.button-secondary){--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-fn-active);--button-border-color-hover: var(--kfw-color-text-on-dark-bg)}:where(.bg-dark,.footer) :where(.button-primary.has-icon-only:where(:hover,:focus-visible)),:where(.bg-dark,.footer) :where(.button-secondary.has-icon-only:where(:hover,:focus-visible)){color:var(--kfw-color-text-on-dark-bg);background-color:var(--kfw-color-fn-active);border-width:var(--kfw-borderradius-small)}:where(.bg-dark,.footer) :where(.button-primary.has-icon-only:where(:hover)),:where(.bg-dark,.footer) :where(.button-secondary.has-icon-only:where(:hover)){border-color:var(--kfw-color-text-on-dark-bg)}:where(.bg-dark,.footer) :where(.button-primary.has-icon-only:where(:active)),:where(.bg-dark,.footer) :where(.button-secondary.has-icon-only:where(:active)){border-width:var(--kfw-borderwidth)}.bg-subtle{background-color:var(--kfw-color-background-subtle)}.bg-light{background-color:var(--kfw-color-background-light-blue)}.bg-white{background-color:var(--kfw-color-background)}.visually-hidden{clip:rect(0 0 0 0);clip-path:inset(50%);block-size:1px;overflow:hidden;position:absolute;white-space:nowrap;inline-size:1px}.d-block{display:block}.my-lg{margin-block:var(--kfw-space-large)}.m-auto{margin-inline:auto}.p-0{padding:0}.p-sm{padding:var(--kfw-space-small)}.mb-0{margin-block-end:0}.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)}.grid-padding-x{padding-inline:var(--kfw-gridgap-large)}.grid-padding-y{padding-block:var(--kfw-gridgap-large)}.grid-margin-x{margin-inline:var(--kfw-gridgap-large)}.grid-margin-y{margin-block:var(--kfw-gridgap-large)}.t-center{text-align:center}.relative{position:relative}.static{position:static}.fixed{position:fixed}.sticky{position:sticky}.absolute{position:absolute}}
|
|
1
|
+
@layer reset,tokens,base,icons,components,utilities;@layer reset{@layer{*,*:after,*:before{box-sizing:border-box}:focus-visible{outline-offset:3px}html{-webkit-text-size-adjust:none;-moz-text-size-adjust:none;text-size-adjust:none}html{line-height:1.5}html{scrollbar-gutter:stable}h1{font-size:2em;margin-block:.67em}abbr[title]{cursor:help;text-decoration-line:underline;text-decoration-style:dotted}@media(forced-colors:active){mark{color:HighlightText;background-color:Highlight}}audio,iframe,img,svg,video{max-block-size:100%;max-inline-size:100%}fieldset{min-inline-size:0}label:has(+:where(input:not([type=radio],[type=checkbox]),select,textarea)){display:block}textarea:not([rows]){min-block-size:6em}button,input,select,textarea{font-family:inherit;font-size:inherit}[type=search]{-webkit-appearance:textfield}@supports (-webkit-touch-callout: none){[type=search]{border:1px solid -apple-system-secondary-label;background-color:canvas}}input:where([type=tel],[type=url],[type=email],[type=number]):not(:-moz-placeholder){direction:ltr}input:where([type=tel],[type=url],[type=email],[type=number]):not(:placeholder-shown){direction:ltr}table{border-collapse:collapse;border:1px solid}th,td{border:1px solid;padding:.25em .5em;vertical-align:top}dialog::backdrop{background:#0000004d}dialog,[popover],dialog::backdrop{opacity:0;transition:opacity .15s ease-out,display .15s allow-discrete,overlay .15s allow-discrete}dialog[open],:popover-open,dialog[open]::backdrop{opacity:1}@starting-style{dialog[open],:popover-open,dialog[open]::backdrop{opacity:0}}[hidden]:not([hidden=until-found]){display:none!important}img{display:block}summary{cursor:default}iframe{border:none}@supports (position-area: end){[popover]{margin:0;position-area:end span-end;position-try-fallbacks:flip-block,flip-inline,flip-block flip-inline}}}}@layer tokens{:root,:host{color-scheme:light}:root,:host{--kfw-base-color-blue-100: #e9f5fb;--kfw-base-color-blue-400: #54b3e2;--kfw-base-color-blue-500: #007abc;--kfw-base-color-blue-600: #005a8c;--kfw-base-color-blue-700: #00446e;--kfw-base-color-blue-800: #00375b;--kfw-base-color-green-100: #ecfded;--kfw-base-color-green-300: #b7f9aa;--kfw-base-color-green-400: #94eb90;--kfw-base-color-green-700: #398357;--kfw-base-color-white-90: #ffffffe6;--kfw-base-color-white-95: #fffffff2;--kfw-base-color-white: #fff;--kfw-base-color-gray-50: #f6f7f8;--kfw-base-color-gray-100: #eef0f2;--kfw-base-color-gray-200: #d8dfe3;--kfw-base-color-gray-300: #a1adb5;--kfw-base-color-gray-400: #6d767d;--kfw-base-color-gray-500-10: #41484c1a;--kfw-base-color-gray-500-30: #41484c4d;--kfw-base-color-gray-500-90: #41484ce6;--kfw-base-color-gray-500: #41484c;--kfw-base-color-gray-600: #2d3134;--kfw-base-color-violet-400: #a455c5;--kfw-base-color-violet-500: #643179;--kfw-base-color-red-400: #c80538;--kfw-base-color-yellow-500: #eac80b;--kfw-base-fontfamily-sans: "KfW Centro Sans", Arial, "Helvetica Neue", Helvetica, sans-serif;--kfw-base-fontfamily-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;--kfw-base-space-static-5: .5rem;--kfw-base-space-static-10: 1rem;--kfw-base-space-static-15: 1.5rem;--kfw-base-space-static-20: 2rem;--kfw-base-space-static-25: 2.5rem;--kfw-base-space-static-30: 3rem;--kfw-base-space-static-35: 3.5rem;--kfw-base-space-static-40: 4rem;--kfw-base-space-static-48: 4.8rem;--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-space-fluid-40-48-min: 4rem;--kfw-base-space-fluid-40-48-max: 4.8rem;--kfw-base-space-fluid-40-48-val: 1.471vi + 3.2941rem;--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.5rem;--kfw-base-fontsize-static-5xl: 2.6rem;--kfw-base-fontsize-static-6xl: 2.8rem;--kfw-base-fontsize-static-7xl: 3rem;--kfw-base-fontsize-static-8xl: 3.2rem;--kfw-base-fontsize-static-9xl: 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-xl-3xl-min: 2rem;--kfw-base-fontsize-fluid-xl-3xl-max: 2.4rem;--kfw-base-fontsize-fluid-xl-3xl-val: .588vi + 1.6471rem;--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.5rem;--kfw-base-fontsize-fluid-4xl-max: 3rem;--kfw-base-fontsize-fluid-4xl-val: .735vi + 2.0588rem;--kfw-base-fontsize-fluid-5xl-min: 2.6rem;--kfw-base-fontsize-fluid-5xl-max: 3rem;--kfw-base-fontsize-fluid-5xl-val: .588vi + 2.2471rem;--kfw-base-fontsize-fluid-6xl-min: 2.8rem;--kfw-base-fontsize-fluid-6xl-max: 3.2rem;--kfw-base-fontsize-fluid-6xl-val: .588vi + 2.4471rem;--kfw-base-fontsize-fluid-7xl-min: 3rem;--kfw-base-fontsize-fluid-7xl-max: 3.6rem;--kfw-base-fontsize-fluid-7xl-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.45;--kfw-base-lineheight-xl: 1.5;--kfw-base-borderradius-sm: 2px;--kfw-base-borderradius-md: 4px;--kfw-base-borderradius-lg: 20px;--kfw-base-borderradius-circle: 9999px;--kfw-base-borderwidth-md: 1px;--kfw-base-borderwidth-lg: 2px;--kfw-base-fontweight-regular: 400;--kfw-base-fontweight-medium: 500;--kfw-base-wordspacing-normal: 0;--kfw-base-wordspacing-wide: 1.6px;--kfw-base-letterspacing-tight: -.5px;--kfw-base-letterspacing-normal: 0;--kfw-base-letterspacing-wide: .5px;--kfw-base-letterspacing-wider: 1px;--kfw-base-offset: 2px;--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-sm: 5.625vi;--kfw-base-layout-safezone-md: 6.667vi;--kfw-base-layout-safezone-lg: 7.5vi;--kfw-base-layout-safezone-xl: 0;--kfw-base-layout-gridgap-static-xs: 1.2rem;--kfw-base-layout-gridgap-static-sm: 1.8rem;--kfw-base-layout-gridgap-static-md: 2rem;--kfw-base-layout-gridgap-static-lg: 2.2rem;--kfw-base-layout-gridgap-static-xl: 2.6rem;--kfw-base-layout-gridgap-static-2xl: 3.6rem;--kfw-base-layout-gridgap-static-3xl: 4rem;--kfw-base-layout-gridgap-fluid-basic-min: 1.2rem;--kfw-base-layout-gridgap-fluid-basic-max: 3.6rem;--kfw-base-layout-gridgap-fluid-basic-val: 3.529vi - .9176rem;--kfw-base-layout-gridgap-fluid-large-min: 2rem;--kfw-base-layout-gridgap-fluid-large-max: 4rem;--kfw-base-layout-gridgap-fluid-large-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-10: 10;--kfw-base-layout-gridcolumn-12: 12;--kfw-color-fn: #005a8c;--kfw-color-fn-active: #00446e;--kfw-color-fn-inactive: #a1adb5;--kfw-color-fn-border: #2d3134;--kfw-color-fn-label: #2d3134;--kfw-color-text: #2d3134;--kfw-color-text-on-dark-bg: #fff;--kfw-color-text-headline-on-dark-bg: #b7f9aa;--kfw-color-text-on-disabled: #fff;--kfw-color-background: #fff;--kfw-color-background-subtle: #f6f7f8;--kfw-color-background-disabled: #a1adb5;--kfw-color-background-light-blue: #e9f5fb;--kfw-color-background-light-green: #ecfded;--kfw-color-background-medium-green: #b7f9aa;--kfw-color-background-dark-blue: #00375b;--kfw-color-background-dark-green: #398357;--kfw-color-opaque-white-90: #ffffffe6;--kfw-color-opaque-white-95: #fffffff2;--kfw-color-opaque-gray-500-10: #41484c1a;--kfw-color-opaque-gray-500-30: #41484c4d;--kfw-color-opaque-gray-500-90: #41484ce6;--kfw-color-state-danger: #c80538;--kfw-color-state-success: #398357;--kfw-color-state-warning: #a455c5;--kfw-color-status-red: #c80538;--kfw-color-status-yellow: #eac80b;--kfw-color-status-green: #398357;--kfw-color-line-6: #00446e;--kfw-color-line-7: #2d3134;--kfw-color-line-8: #a1adb5;--kfw-color-line-9: #005a8c;--kfw-color-line-10: #2d3134;--kfw-color-line-11: #b7f9aa;--kfw-color-line-12: #a1adb5;--kfw-color-product-container: #f6f7f8;--kfw-color-product-benefit: #007abc;--kfw-color-product-credit: #398357;--kfw-color-product-cooperation: #643179;--kfw-color-product-credit-benefit: #41484c;--kfw-color-icon: #005a8c;--kfw-color-icon-secondary: #54b3e2;--kfw-color-icon-disabled: #398357;--kfw-color-icon-disabled-secondary: #94eb90;--kfw-fontfamily: "KfW Centro Sans", Arial, "Helvetica Neue", Helvetica, sans-serif;--kfw-fontfamily-code: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;--kfw-space-tiny: .5rem;--kfw-space-xsmall: 1rem;--kfw-space-midSmall: 1.5rem;--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-xlarge-min: 4rem;--kfw-space-xlarge-max: 4.8rem;--kfw-space-xlarge-val: 1.471vi + 3.2941rem;--kfw-space-big-min: 5rem;--kfw-space-big-max: 6rem;--kfw-space-big-val: 1.471vi + 4.1176rem;--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-large: 1.45;--kfw-lineheight-lightspeech: 1.5;--kfw-lineheight-heading: 1.3;--kfw-lineheight-heading-5: 1.333;--kfw-lineheight-small: 1.2;--kfw-borderradius: 4px;--kfw-borderradius-small: 2px;--kfw-borderradius-large: 20px;--kfw-borderradius-circle: 9999px;--kfw-borderwidth: 1px;--kfw-borderwidth-large: 2px;--kfw-borderstyle: solid;--kfw-focusring-outline-width: 2px;--kfw-focusring-outline-offset: 2px;--kfw-focusring-outline-style: dashed;--kfw-focusring-outline-color: #00446e;--kfw-focusring-outline-radius: 4px;--kfw-fontweight: 400;--kfw-fontweight-bold: 500;--kfw-wordspacing-lightspeech: 1.6px;--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-mobile: 5.625vi;--kfw-safezone-tablet: 6.667vi;--kfw-safezone-desktop: 7.5vi;--kfw-safezone-desktop-large: 0;--kfw-gridgap-basic-min: 1.2rem;--kfw-gridgap-basic-max: 3.6rem;--kfw-gridgap-basic-val: 3.529vi - .9176rem;--kfw-gridgap-large-min: 2rem;--kfw-gridgap-large-max: 4rem;--kfw-gridgap-large-val: 2.941vi + .2353rem}}@layer icons{:root,:host{--kfw-icon-alert: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' data-name='Ebene 1' viewBox='0 0 24 24'%3E%3Cpath d='M21.97 20.126a.25.25 0 0 1-.216.378H2.223a.23.23 0 0 1-.197-.346l9.77-16.548a.234.234 0 0 1 .404 0Z' style='fill:%23000;fill-rule:evenodd'/%3E%3C/svg%3E");--kfw-icon-arrow-down: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23005a8c' fill-rule='evenodd' 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' style='fill:%23005a8c'/%3E%3C/svg%3E");--kfw-icon-arrow-left: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23005a8c' fill-rule='evenodd' d='m16.148 2.146.706.706a.5.5 0 0 1 0 .706l-8.238 8.447 8.238 8.437a.5.5 0 0 1 0 .705l-.706.707a.5.5 0 0 1-.706 0l-9.296-9.496a.5.5 0 0 1 0-.706l9.296-9.506a.5.5 0 0 1 .706 0' style='fill:%23005a8c'/%3E%3C/svg%3E");--kfw-icon-arrow-right: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23005a8c' fill-rule='evenodd' d='m7.852 21.854-.706-.706a.5.5 0 0 1 0-.706l8.238-8.447-8.238-8.437a.5.5 0 0 1 0-.706l.706-.706a.5.5 0 0 1 .706 0l9.296 9.496a.5.5 0 0 1 0 .705l-9.296 9.507a.5.5 0 0 1-.706 0' style='fill:%23005a8c'/%3E%3C/svg%3E");--kfw-icon-arrow-up: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='m21.854 17.148-.706.706a.5.5 0 0 1-.706 0l-8.448-8.238-8.436 8.238a.5.5 0 0 1-.706 0l-.706-.706a.5.5 0 0 1 0-.706l9.495-9.296a.5.5 0 0 1 .706 0l9.507 9.296a.5.5 0 0 1 0 .706' style='fill:%23000'/%3E%3C/svg%3E");--kfw-icon-bullet-point-empty: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C6.478 2 2 6.478 2 12s4.478 10 10 10 10-4.478 10-10S17.522 2 12 2m0 2c4.411 0 8 3.589 8 8s-3.589 8-8 8-8-3.589-8-8 3.589-8 8-8'/%3E%3C/svg%3E");--kfw-icon-bullet-point: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C6.478 2 2 6.478 2 12s4.478 10 10 10 10-4.478 10-10S17.522 2 12 2'/%3E%3C/svg%3E");--kfw-icon-calendar: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M7.5 2a.5.5 0 0 1 .5.5V4h8V2.5c0-.277.223-.5.5-.5h1a.5.5 0 0 1 .5.5V4h3.5a.5.5 0 0 1 .5.5v17a.5.5 0 0 1-.5.5h-19a.5.5 0 0 1-.5-.5v-17c0-.277.223-.5.5-.5H6V2.5c0-.277.223-.5.5-.5ZM20 6H4v14h16zM7.5 16a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5Zm5 0a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5Zm5 0a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5Zm-10-4a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5Zm5 0a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5Zm5 0a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5Zm-10-4a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5Zm5 0a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5Zm5 0a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5Z'/%3E%3C/svg%3E");--kfw-icon-checked: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m20.854 5.852-.706-.706a.5.5 0 0 0-.706 0L9.509 15.385l-4.95-5.256a.5.5 0 0 0-.707 0l-.706.706a.5.5 0 0 0 0 .706l6.01 6.313a.5.5 0 0 0 .706 0L20.854 6.56a.5.5 0 0 0 0-.708'/%3E%3C/svg%3E");--kfw-icon-close: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23005a8c' fill-rule='evenodd' d='m5.99 4.575 6.01 6.01 6.01-6.01a.5.5 0 0 1 .708 0l.707.708a.5.5 0 0 1 0 .707L13.415 12l6.01 6.01a.5.5 0 0 1 0 .707l-.707.708a.5.5 0 0 1-.707 0l-6.012-6.012-6.01 6.012a.5.5 0 0 1-.707 0l-.707-.707a.5.5 0 0 1 0-.707l6.01-6.012-6.01-6.01a.5.5 0 0 1 0-.706l.707-.708a.5.5 0 0 1 .708 0' style='fill:%23fff'/%3E%3C/svg%3E");--kfw-icon-delete: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Ctitle%3Eicon/mülleimer%3C/title%3E%3Cpath fill='%23000' fill-rule='evenodd' d='M7 20h10V8H7zm3-14h4V3.998h-4zm10.5 0H16V2.5a.5.5 0 0 0-.5-.5h-7c-.277 0-.5.223-.5.5V6H3.5c-.277 0-.5.223-.5.5v1a.5.5 0 0 0 .5.5H5v13.5a.5.5 0 0 0 .5.5h13a.5.5 0 0 0 .5-.5V8h1.5a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5'/%3E%3C/svg%3E");--kfw-icon-dialogue: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M15 12H5.74a.5.5 0 0 0-.39.188L4 13.874V4h11zm1.5 2a.5.5 0 0 0 .5-.5V9h3v9.874l-1.35-1.686a.5.5 0 0 0-.39-.187H9v-3zM7 14v4.5a.5.5 0 0 0 .5.5h10l2.515 2.82c.095.115.235.18.383.18H21.5a.5.5 0 0 0 .5-.5v-14a.5.5 0 0 0-.5-.5H17V2.5a.5.5 0 0 0-.5-.5h-14a.5.5 0 0 0-.5.5v14a.5.5 0 0 0 .5.5h1.102a.5.5 0 0 0 .383-.18L6.5 14z'/%3E%3C/svg%3E");--kfw-icon-exclamation-mark-filled: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2c5.522 0 10 4.477 10 10s-4.478 10-10 10S2 17.523 2 12 6.478 2 12 2m.75 15h-1.5a.25.25 0 0 0-.25.25v1.5c0 .138.112.25.25.25h1.5a.25.25 0 0 0 .25-.25v-1.5a.25.25 0 0 0-.25-.25m0-12h-1.5a.25.25 0 0 0-.25.25v9.5c0 .138.112.25.25.25h1.5a.25.25 0 0 0 .25-.25v-9.5a.25.25 0 0 0-.25-.25'/%3E%3C/svg%3E");--kfw-icon-home: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 20h-5v-6.5a.5.5 0 0 0-.5-.5h-5a.5.5 0 0 0-.5.5V20H4v-8.322L12.001 4.5 20 11.678zm1.83-9.374-9.498-8.502a.5.5 0 0 0-.663.002l-9.501 8.501a.5.5 0 0 0-.168.374V21.5a.5.5 0 0 0 .5.5H11v-7.001h2V22h8.5a.5.5 0 0 0 .5-.5V11.001a.5.5 0 0 0-.17-.375'/%3E%3C/svg%3E");--kfw-icon-lock: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M7 20h10v-8H7zM9 7c0-1.654 1.345-3 3-3s3 1.346 3 3v3H9zm9.5 3H17V7c0-2.757-2.242-5-5-5S7 4.243 7 7v3H5.5a.5.5 0 0 0-.5.5v11a.5.5 0 0 0 .5.5h13a.5.5 0 0 0 .5-.5v-11c0-.277-.223-.5-.5-.5' style='fill:%23000'/%3E%3C/svg%3E");--kfw-icon-login: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M21.5 2c.28 0 .5.22.5.5v19c0 .28-.22.5-.5.5h-19c-.28 0-.5-.22-.5-.5v-6c0-.28.22-.5.5-.5h1c.28 0 .5.22.5.5V20h16V4H4v4.5c0 .28-.22.5-.5.5h-1c-.28 0-.5-.22-.5-.5v-6c0-.28.22-.5.5-.5zM10.82 6.15c.19-.19.51-.19.71 0l5.18 5.15c.19.2.29.45.29.7 0 .26-.1.51-.29.7l-5.18 5.15c-.19.19-.51.19-.71 0l-.67-.74c-.2-.2-.2-.51 0-.71l3.45-3.41H2.5c-.28 0-.5-.22-.5-.5v-.99c0-.28.22-.5.5-.5h11.1l-3.45-3.41c-.2-.2-.2-.51 0-.71l.67-.74z' style='fill:%23000'/%3E%3C/svg%3E");--kfw-icon-menu: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Ctitle%3E01_Elemente (ATOME, MOLECULES)/Icons/Funktionsicons/menü-texthinweis-DE%3C/title%3E%3Cpath fill='%23005a8c' fill-rule='evenodd' d='M18.957 14.963v2.956q0 .525.249.77.248.245.719.245a.98.98 0 0 0 .688-.239q.26-.239.259-.776l-.007-2.956h.968l-.007 2.922c.004.251-.035.501-.114.74-.07.21-.19.401-.349.557-.17.16-.374.28-.597.35a2.7 2.7 0 0 1-.858.12c-.3.007-.599-.034-.885-.12a1.5 1.5 0 0 1-.6-.35 1.36 1.36 0 0 1-.34-.557 2.4 2.4 0 0 1-.107-.74v-2.922zm-15.569.007.604 1.498.151.386a70 70 0 0 1 .339.877q.08.215.154.383h.054q.16-.39.329-.813.168-.423.329-.82.067-.141.15-.342l.084-.204.084-.21q.084-.21.168-.413.084-.201.151-.342h1.18v4.615h-.96v-3.117h-.02l-.336.853q-.087.195-.191.437a90 90 0 0 0-.414.974q-.1.242-.188.437h-.813q-.087-.203-.188-.45a84 84 0 0 0-.413-.998q-.105-.246-.198-.447l-.296-.773h-.02v1.127l-.006.831v1.126h-.955V14.97zm8.212 0v.705H9.417v1.162h1.834v.659H9.417v1.384h2.277v.705H8.416V14.97zm2.164 0 .713 1.115q.352.55.706 1.122l.583.94h.04V14.97h.961v4.615h-.992L14.213 17.1l-.115-.193-.117-.19a16 16 0 0 1-.23-.383q-.01-.001-.018.004-.003.003-.016.003v3.245h-.961V14.97zm5.442-1.13a.5.5 0 0 1 .356.115.4.4 0 0 1 .12.302.4.4 0 0 1-.12.296.5.5 0 0 1-.279.12h-.077a.45.45 0 0 1-.343-.12.41.41 0 0 1-.114-.296.4.4 0 0 1 .117-.299.46.46 0 0 1 .34-.117m1.417 0a.5.5 0 0 1 .357.115.4.4 0 0 1 .12.302.4.4 0 0 1-.12.296.5.5 0 0 1-.279.12h-.078a.44.44 0 0 1-.336-.12.41.41 0 0 1-.114-.296.4.4 0 0 1 .118-.299.45.45 0 0 1 .332-.117m.877-3.856a.5.5 0 0 1 .492.41l.008.089v.997a.5.5 0 0 1-.5.498h-19a.5.5 0 0 1-.492-.409L2 11.48v-.996a.5.5 0 0 1 .5-.499zM21.5 5a.5.5 0 0 1 .492.409l.008.09v.996a.5.5 0 0 1-.5.499h-19a.5.5 0 0 1-.492-.409L2 6.495v-.997A.5.5 0 0 1 2.5 5z'/%3E%3C/svg%3E");--kfw-icon-personal-settings: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 12c2.8 0 5-2.2 5-5s-2.2-5-5-5-5 2.2-5 5 2.2 5 5 5m0-8c1.7 0 3 1.3 3 3s-1.3 3-3 3-3-1.3-3-3 1.3-3 3-3m8.8 12.6C19.8 15.2 18 14 15 14H9c-3 0-4.8 1.2-5.8 2.6C2.2 18.1 2 19.8 2 21c0 .7.5 1 1 1h18c.5 0 1-.3 1-1 0-1.2-.2-2.9-1.2-4.4M4 20c.1-.7.3-1.5.8-2.2.8-1.2 2.1-1.8 4.1-1.8h6.2c2 0 3.3.6 4.1 1.8.5.7.7 1.5.8 2.2z'/%3E%3C/svg%3E");--kfw-icon-plus: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Ctitle%3Eicon/plus%3C/title%3E%3Cpath fill='%23000' fill-rule='evenodd' d='M19.5 11H13V4.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5V11H4.5a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5H11v6.5a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5V13h6.5a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5'/%3E%3C/svg%3E");--kfw-icon-search: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Ctitle%3Eicon/lupe%3C/title%3E%3Cpath fill='%23000' fill-rule='evenodd' d='M4 10c0-3.31 2.69-6 6-6s6 2.69 6 6-2.691 6-6 6-6-2.691-6-6m17.854 10.439-5.54-5.54A7.95 7.95 0 0 0 18 10a8 8 0 1 0-8 8 7.95 7.95 0 0 0 4.9-1.685l5.539 5.54a.5.5 0 0 0 .707 0l.708-.708a.5.5 0 0 0 0-.707'/%3E%3C/svg%3E");--kfw-icon-time: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M12 2c5.5 0 10 4.5 10 10s-4.5 10-10 10S2 17.5 2 12 6.5 2 12 2m0 2c-4.4 0-8 3.6-8 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8m.4 3c.3 0 .5.2.5.5v5.3l2.6 2.6c.2.2.2.5 0 .7l-.7.7c-.2.2-.5.2-.7 0l-3.2-3.2V7.5c0-.3.2-.5.5-.5Z'/%3E%3C/svg%3E");--kfw-icon-upload: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Ctitle%3Eicon/upload%3C/title%3E%3Cpath d='M3.5 13a.5.5 0 0 1 .5.5V20h16v-6.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v8a.5.5 0 0 1-.5.5h-19a.5.5 0 0 1-.5-.5v-8a.5.5 0 0 1 .5-.5ZM12 2a1 1 0 0 1 .703.292l6.15 6.184a.5.5 0 0 1 0 .706l-.735.671a.5.5 0 0 1-.707 0l-4.415-4.448L13 16.5a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5l.005-11.095-4.416 4.448a.5.5 0 0 1-.707 0l-.735-.67a.5.5 0 0 1 0-.707l6.15-6.184A1 1 0 0 1 12 2'/%3E%3C/svg%3E")}.icon--alert{--icon: var(--kfw-icon-alert)}.icon--arrow-down{--icon: var(--kfw-icon-arrow-down)}.icon--arrow-left{--icon: var(--kfw-icon-arrow-left)}.icon--arrow-right{--icon: var(--kfw-icon-arrow-right)}.icon--arrow-up{--icon: var(--kfw-icon-arrow-up)}.icon--bullet-point-empty{--icon: var(--kfw-icon-bullet-point-empty)}.icon--bullet-point{--icon: var(--kfw-icon-bullet-point)}.icon--calendar{--icon: var(--kfw-icon-calendar)}.icon--checked{--icon: var(--kfw-icon-checked)}.icon--close{--icon: var(--kfw-icon-close)}.icon--delete{--icon: var(--kfw-icon-delete)}.icon--dialogue{--icon: var(--kfw-icon-dialogue)}.icon--exclamation-mark-filled{--icon: var(--kfw-icon-exclamation-mark-filled)}.icon--home{--icon: var(--kfw-icon-home)}.icon--lock{--icon: var(--kfw-icon-lock)}.icon--login{--icon: var(--kfw-icon-login)}.icon--menu{--icon: var(--kfw-icon-menu)}.icon--personal-settings{--icon: var(--kfw-icon-personal-settings)}.icon--plus{--icon: var(--kfw-icon-plus)}.icon--search{--icon: var(--kfw-icon-search)}.icon--time{--icon: var(--kfw-icon-time)}.icon--upload{--icon: var(--kfw-icon-upload)}}@layer tokens{:root,:host{--kfw-space-large: clamp(var(--kfw-space-large-min), var(--kfw-space-large-val), var(--kfw-space-large-max));--kfw-space-xlarge: clamp(var(--kfw-space-xlarge-min), var(--kfw-space-xlarge-val), var(--kfw-space-xlarge-max));--kfw-space-big: clamp(var(--kfw-space-big-min), var(--kfw-space-big-val), var(--kfw-space-big-max));--kfw-gridgap-large: clamp(var(--kfw-gridgap-large-min), var(--kfw-gridgap-large-val), var(--kfw-gridgap-large-max));--kfw-gridgap-basic: clamp(var(--kfw-gridgap-basic-min), var(--kfw-gridgap-basic-val), var(--kfw-gridgap-basic-max));--kfw-safezone: var(--kfw-safezone-mobile);--headline-color: var(--kfw-color-text);--kfw-focusring-outline-color: var(--kfw-color-fn-active);--kfw-fontsize-heading-4: clamp(var(--kfw-fontsize-heading-4-min), var(--kfw-fontsize-heading-4-val), var(--kfw-fontsize-heading-4-max));--kfw-invalid-border-width: .2rem;--kfw-invalid-border-offset: 1rem}@media(min-width:600px){:root,:host{--kfw-safezone: var(--kfw-safezone-tablet)}}@media(min-width:960px){:root,:host{--kfw-safezone: var(--kfw-safezone-desktop)}}@media(min-width:1280px){:root,:host{--kfw-safezone: var(--kfw-safezone-desktop-large)}}}@layer base{:root,:host{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);font-synthesis:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;scroll-padding-block-start:5.8rem}:focus-visible{outline-offset:var(--kfw-focusring-outline-offset);outline:0 var(--kfw-focusring-outline-style) var(--kfw-focusring-outline-color)}[data-whatinput=keyboard]:not([data-whatintent=mouse]) *:focus-visible{outline-width:var(--kfw-focusring-outline-width)}body{margin:0;font-size:1.6rem}body.no-scroll{overflow:hidden;overscroll-behavior:contain;position:relative;padding-inline:0;padding-block-start:0;margin-inline:0;margin-block-start:0}:where(strong,b){font-weight:var(--kfw-fontweight-bold)}:where(small){font-size:var(--kfw-fontsize-small)}:where(sub,sup){position:relative;line-height:0;vertical-align:baseline;font-size:75%}sub{inset-block-end:-.25em}sup{inset-block-start:-.5em}:where(address,blockquote,dl,ol,p,pre,table,ul){margin-block:0 var(--kfw-space-small)}:where(address,blockquote,dl,ol,p,pre,table,ul):last-child{margin-block-end:0}mark{padding:.125rem .25rem;vertical-align:baseline;background-color:var(--kfw-color-background-medium-green);color:var(--kfw-color-text)}mark::-moz-selection{background-color:var(--kfw-color-background);color:var(--kfw-color-text)}mark::selection{background-color:var(--kfw-color-background);color:var(--kfw-color-text)}.bg-dark mark{background-color:var(--kfw-color-background);color:var(--kfw-color-text)}.bg-dark mark::-moz-selection{background-color:var(--kfw-color-background-dark-blue);color:var(--kfw-color-text-on-dark-bg)}.bg-dark mark::selection{background-color:var(--kfw-color-background-dark-blue);color:var(--kfw-color-text-on-dark-bg)}.bg-light mark{background-color:var(--kfw-color-background-dark-blue);color:var(--kfw-color-text-on-dark-bg)}.bg-light mark::-moz-selection{background-color:var(--kfw-color-background);color:var(--kfw-color-text)}.bg-light mark::selection{background-color:var(--kfw-color-background);color:var(--kfw-color-text)}blockquote{margin-inline:0}blockquote footer{margin-block-start:var(--kfw-space-tiny)}:where(cite,i,em){font-style:normal}:where(dialog),:where(dialog)::backdrop{opacity:1;transition:none}ul,ol,menu{list-style:none;padding-inline-start:0;font-weight:var(--kfw-fontweight)}ul li ul,ul li ol,ol li ul,ol li ol{margin-block-start:var(--kfw-space-xsmall);padding-inline-start:var(--kfw-space-small)}.list-item{position:relative;margin-block-end:var(--kfw-space-xsmall)}.list-item:before{position:absolute;inset-block-start:0;inset-inline-start:0;pointer-events:none;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;background-repeat:no-repeat}:where(.list--numbers,.list--letters,.list--caps,.list--icon,.list--big-checks,.list--checks,.list--bullets)>.list-item{padding-inline-start:2rem}:where(.list--numbers,.list--letters,.list--caps,.list--icon,.list--big-checks,.list--checks,.list--bullets)>.list-item:before{content:""}:where(.list--numbers,.list--letters,.list--caps,.list--icon,.list--big-checks,.list--checks,.list--bullets)>.list-item :where(ul,ol){padding-inline-start:0}:where(.list--letters,.list--caps){counter-reset:item}:where(.list--letters,.list--caps) .list-item:before{content:counter(item,lower-latin) ".";counter-increment:item;font-weight:var(--kfw-fontweight-bold)}.list--caps .list-item:before{content:counter(item,upper-latin) "."}.list--numbers{counter-reset:item-counter}.list--numbers>.list-item:before{content:counter(item-counter) ".";counter-increment:item-counter;font-weight:var(--kfw-fontweight-bold)}:where(.list--checks,.list--big-checks)>.list-item{--icon: var(--kfw-icon-checked)}.list--checks>.list-item:before{min-inline-size:var(--icon-size-sm);min-block-size:var(--icon-size-sm);-webkit-mask-image:var(--icon);mask-image:var(--icon);background-color:var(--kfw-color-background-dark-green);inset-block-start:.3rem}.list--big-checks>.list-item{--size: var(--icon-size-lg);--space: 1.5rem;padding-inline-start:calc(var(--size) + var(--space))}.list--big-checks>.list-item:before{min-inline-size:var(--size);min-block-size:var(--size);inset-block-start:-.1rem;-webkit-mask-image:var(--icon);mask-image:var(--icon);background-color:var(--kfw-color-background-dark-green)}@media(min-width:1280px){.list--big-checks>.list-item{--size: var(--icon-size-xl);--space: 1rem}.list--big-checks>.list-item:before{inset-block-start:-.3rem}}.list--icon>.list-item{--size: var(--icon-size-md);--space: 1.5rem;--icon: var(--kfw-icon-checked);margin-block-end:var(--kfw-space-small);font-weight:var(--kfw-fontweight-bold);padding-inline-start:calc(var(--size) + var(--space))}.list--icon>.list-item:before{--icon-color: var(--kfw-color-background-dark-green);min-inline-size:var(--size);min-block-size:var(--size);-webkit-mask-image:var(--icon);mask-image:var(--icon);background-color:var(--icon-color);inset-block-start:-.1rem}.list--bullets>.list-item{--icon-size-md: .7rem;padding-inline-start:calc(var(--icon-size-md) + 1rem)}.list--bullets>.list-item:before{min-inline-size:var(--icon-size-md);min-block-size:var(--icon-size-md);inset-block-start:.8rem;-webkit-mask-image:var(--kfw-icon-bullet-point);mask-image:var(--kfw-icon-bullet-point);background-color:currentcolor}.list--bullets-empty>.list-item:before{-webkit-mask-image:var(--kfw-icon-bullet-point-empty);mask-image:var(--kfw-icon-bullet-point-empty);background-color:currentcolor}table{inline-size:100%;border-collapse:collapse;border-spacing:0;border-inline-start:0;border-inline-end:0;text-indent:0;overflow:visible;border-block-start:var(--kfw-borderwidth) solid var(--kfw-color-line-10);border-block-end:var(--kfw-borderwidth-large) solid var(--kfw-color-line-7)}tr{background-color:var(--kfw-color-background)}thead tr{border-block-end:var(--kfw-borderwidth) solid var(--kfw-color-line-8)}tr:not(:last-of-type){border-block-end: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-inline-size:100%;block-size:auto;border-style:none}code,kbd,samp,pre{font-family:var(--kfw-fontfamily-code);line-height:initial}pre{display:block;margin-block:0 var(--kfw-space-small);overflow:auto;-ms-overflow-style:scrollbar}abbr[title]{-webkit-text-decoration:underline dotted;text-decoration:underline dotted;cursor:help}ins{color:var(--kfw-color-state-success);text-decoration:none}del{color:var(--kfw-color-state-danger)}:where(h1,h2,h3,h4,h5,h6,.hl--1,.hl--2,.hl--3,.hl--4,.hl--5,.hl--6){font-weight:var(--kfw-fontweight-bold);line-height:var(--kfw-lineheight-heading);margin-block-start:0;color:var(--headline-color);display:block}:where(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-space-small)}@media(min-width:1280px){:where(h1,.hl--1){letter-spacing:var(--kfw-base-letterspacing-tight)}}:where(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-space-small);letter-spacing:var(--kfw-base-letterspacing-tight)}:where(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-space-xsmall);letter-spacing:var(--kfw-base-letterspacing-tight)}@media(min-width:1280px){:where(h3,.hl--3){letter-spacing:var(--kfw-base-letterspacing-normal)}}:where(h4,.hl--4){font-size:var(--kfw-fontsize-heading-4);margin-block-end:var(--kfw-space-xsmall)}:where(h5,.hl--5){font-size:var(--kfw-fontsize-heading-5);margin-block-end:var(--kfw-space-xsmall);line-height:var(--kfw-lineheight-heading-5);letter-spacing:var(--kfw-base-letterspacing-normal)}@media(min-width:1280px){:where(h5,.hl--5){letter-spacing:var(--kfw-base-letterspacing-wide)}}:where(h6,.hl--6){font-size:var(--kfw-fontsize-heading-6);margin-block-end:var(--kfw-space-xsmall);letter-spacing:var(--kfw-base-letterspacing-wide);line-height:var(--kfw-lineheight)}:where(.form-control,.form-select){--borderhover: var(--kfw-color-fn-active);--placeholder-color: var(--kfw-color-fn);-webkit-appearance:none;-moz-appearance:none;appearance:none;inline-size:100%;block-size: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) var(--kfw-borderstyle) var(--kfw-color-fn-border);padding-inline:1.5rem;padding-block:1rem;background-color:var(--kfw-color-background);background-repeat:no-repeat}:where(.form-control::-moz-placeholder,.form-select::-moz-placeholder){color:var(--placeholder-color)}:where(.form-control::placeholder,.form-select::placeholder){color:var(--placeholder-color)}:where(.form-control:disabled,.form-select:disabled){--placeholder-color: var(--kfw-color-text);background-color:transparent;color:var(--kfw-color-text);border-color:var(--kfw-color-fn-inactive)}:where(.form-control,.form-select):hover:not(:disabled){box-shadow:0 0 0 var(--kfw-borderwidth) var(--borderhover)}:where([type=checkbox],[type=radio],.form-select):not(:disabled){cursor:pointer}:where(.form-control,.form-select)[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)}textarea.form-control{block-size:auto}.form-select{--form-control-space: 1.5rem;padding-block:0;padding-inline:var(--form-control-space) calc(var(--icon-size-md) + var(--form-control-space) * 2);background-position:center right var(--form-control-space);background-size:var(--icon-size-md) auto;background-image:var(--kfw-icon-select)}.form-select:disabled{background-image:var(--kfw-icon-select-disabled)}:where(progress,[type=checkbox],[type=radio],[type=range]){accent-color:var(--kfw-color-fn)}textarea{display:block;resize:block}fieldset{margin:0;padding:0;border:0}:where(.form-text,.invalid-feedback){--space: .5rem;white-space:pre-line;-moz-column-gap:var(--space);column-gap:var(--space);inline-size:100%;margin-block-start:var(--space);font-size:var(--kfw-fontsize-small);line-height:var(--kfw-lineheight);letter-spacing:var(--kfw-base-letterspacing-normal);display:inline-grid;grid-template-columns:auto 1fr}:where(.form-text--single,.invalid-feedback--single){margin-block-start:0}:where(.form-text--group,.invalid-feedback--group){margin-block-start:calc(var(--kfw-invalid-border-width) + var(--kfw-invalid-border-offset) + .5rem)}.invalid-feedback{color:var(--kfw-color-state-danger)}.invalid-feedback:before{content:"";display:block;inline-size:var(--icon-size-xs);color:inherit;background-color:currentcolor;-webkit-mask:var(--kfw-icon-alert) center / contain no-repeat;mask:var(--kfw-icon-alert) center / contain no-repeat;block-size:1.9rem}.invalid-border{outline:var(--kfw-invalid-border-width) solid var(--kfw-color-state-danger);outline-offset:var(--kfw-invalid-border-offset)}:where(label,.form-label){display:inline-block;margin-block-end:.8rem;font-weight:var(--kfw-fontweight-bold);color:var(--kfw-color-text)}.form-group{margin-block-end:var(--kfw-space-medium)}.list-group-form{--col-gap: 1.5rem;--field-size: 2.8rem;align-items:start;display:flex;flex-direction:column;gap:var(--kfw-space-small) var(--kfw-space-medium)}.list-group-form>li{align-items:start;display:flex;margin-block-end:0}.list-group-form label{font-weight:var(--kfw-fontweight);padding-inline-start:var(--col-gap);inline-size:100%;margin-block-end:0;display:flex;flex:1 1;flex-direction:column;padding-block-start:.4rem}.list-group-form :where([type=checkbox],[type=radio]){-webkit-appearance:none;-moz-appearance:none;appearance:none;inline-size:var(--field-size);block-size:var(--field-size);margin:0;border:var(--kfw-borderwidth) solid var(--kfw-color-text);color:var(--kfw-color-fn-active);vertical-align:middle;position:relative;display:flex;align-items:baseline;flex-shrink:0;justify-content:center;background-color:var(--kfw-color-background)}.list-group-form [type=radio]{border-radius:var(--kfw-borderradius-circle)}.list-group-form [type=checkbox]{border-radius:var(--kfw-borderradius)}.list-group-form :where([type=checkbox],[type=radio]):disabled{background-color:var(--kfw-base-color-gray-100);color:var(--kfw-color-fn-inactive);border-color:var(--kfw-color-fn-inactive)}.list-group-form :where([type=checkbox],[type=radio]):before{content:none;display:block;position:absolute;inset-block-start:50%;inset-inline-start:50%;border-color:currentcolor;border-block-end-style:solid;border-inline-start-style:solid}.list-group-form [type=checkbox]:before{inline-size:1.6rem;block-size:.9rem;transform:translate(-50%,-50%) rotate(314deg);margin-block-start:-1px;border-block-end-width:.225rem;border-inline-start-width:.225rem}.list-group-form [type=radio]:before{inline-size:1.4rem;block-size:1.4rem;transform:translate(-50%,-50%);border-radius:var(--kfw-borderradius-circle);background-color:currentcolor;forced-color-adjust:none}.list-group-form :where([type=checkbox],[type=radio]):checked:before{content:""}.list-group-form :where([type=radio],[type=checkbox]):hover:not(:disabled){border-width:var(--kfw-borderwidth-large)}.list-group-form :where([type=radio],[type=checkbox]):focus-visible:not(:disabled){outline-width:var(--kfw-focusring-outline-width)}[aria-invalid=true] .list-group-form :where([type=checkbox],[type=radio]),.list-group-form :where([type=checkbox],[type=radio])[aria-invalid=true]{border-color:var(--kfw-color-state-danger);color:var(--kfw-color-fn-active);outline-color:var(--kfw-color-state-danger);border-width:var(--kfw-borderwidth-large)}[aria-invalid=true] .list-group-form :where([type=checkbox],[type=radio]):is(:hover),.list-group-form :where([type=checkbox],[type=radio])[aria-invalid=true]:is(:hover){border-width:var(--kfw-borderwidth)}.list-group-form--with-description label{font-weight:var(--kfw-fontweight-bold)}.list-group-form--with-description label>span{font-weight:var(--kfw-fontweight)}.list-group-form>li:has(input:not(:disabled)) label{cursor:pointer}.list-group-form>li:has(.list-group-form--subgroup){flex-wrap:wrap}.list-group-form--subgroup{flex-basis:100%;margin-block-start:var(--kfw-space-small);padding-inline-start:calc(var(--field-size) + var(--col-gap))}@media(min-width:600px){.list-group-form--inline{flex-flow:row wrap}}[data-whatinput=keyboard] :where(.form-control,.form-select)[aria-invalid=true]:focus-visible{outline-color:var(--kfw-color-state-danger)}:where([type=date],[type=time])::-webkit-calendar-picker-indicator{background:transparent;inline-size:1.8rem;block-size:1.8rem}[type=date]::-webkit-calendar-picker-indicator{background-image:var(--kfw-icon-input-datepicker);background-size:var(--icon-size-md);background-repeat:no-repeat;background-position:center center}[type=time]::-webkit-calendar-picker-indicator{background-image:var(--kfw-icon-input-timepicker);background-size:var(--icon-size-md);background-repeat:no-repeat;background-position:center center}.button-group{display:flex;flex-wrap:wrap;align-items:center;gap:var(--kfw-space-small)}:where(a:not([role=button]),[role=link]){--link-color: var(--kfw-color-fn);--link-color-hover: var(--kfw-color-fn-active);--link-background: transparent;--link-border: transparent;color:var(--link-color);text-decoration:none;border-radius:var(--kfw-borderradius);display:inline-flex;vertical-align:top;padding-inline:var(--kfw-borderwidth-large);border-style:var(--kfw-borderstyle);border-width:0;border-color:var(--link-border);cursor:pointer;background-color:var(--link-background);outline:0 var(--kfw-focusring-outline-style) var(--kfw-focusring-outline-color)}:where(a:not([role=button]),[role=link]):where(:hover,:focus-visible,:active){color:var(--link-color-hover);text-decoration:underline}:where(a:not([role=button]),[role=link]):focus-visible{outline-width:var(--kfw-focusring-outline-width)}:where(a:not([role=button]),[role=link]).has-icon-only:where(:hover,:active){outline:var(--kfw-borderwidth-large) var(--kfw-borderstyle) var(--link-color-hover)}:where(a:not([role=button]),[role=link]):active{outline:var(--kfw-borderwidth) var(--kfw-borderstyle) var(--link-color-hover)}:where(a:not([role=button]),[role=link]).has-icon-only:where(:focus-visible){outline-offset:0}:where(a:not([role=button]),[role=link]):has(.icon){--space: .5rem;-moz-column-gap:var(--space);column-gap:var(--space)}p :where(a:not([role=button]),[role=link]){text-decoration:underline}p :where(a:not([role=button]),[role=link]):where(:hover,:focus-visible,:active){text-decoration:none}:where(button:not([role=link]),[role=button]){--space: .8rem;font-family:var(--kfw-fontfamily);font-weight:var(--kfw-fontweight);border-radius:var(--kfw-borderradius);display:inline-flex;-moz-column-gap:var(--space);column-gap:var(--space);text-align:center;text-decoration:none;line-height:var(--kfw-lineheight);padding-block:1.2rem;padding-inline:2.5rem;justify-content:center;max-inline-size:100%;vertical-align:middle;cursor:pointer;border-width:var(--kfw-borderwidth);border-style:solid;border-color:transparent;color:var(--kfw-color-fn);background-color:transparent}.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:where(:hover,:focus-visible,:active){text-decoration:underline}.button-primary:where(:hover,:focus-visible){color:var(--button-color-hover);background-color:var(--button-bg-hover);border-color:var(--button-border-color-hover)}.button-primary:focus-visible{outline-width:var(--kfw-focusring-outline-width)}.button-primary:active{background-color:var(--button-color);color:var(--button-bg-hover);border-color:var(--button-bg-hover)}.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)}.button-secondary:where(:hover,:focus-visible,:active){text-decoration:underline}.button-secondary:where(:hover,:focus-visible){color:var(--button-color-hover);background-color:var(--button-bg-hover);border-color:var(--button-border-color-hover)}.button-secondary:focus-visible{outline-width:var(--kfw-focusring-outline-width)}.button-secondary:active{color:var(--button-bg-hover);background-color:var(--button-color-hover);border-color:var(--button-bg-hover)}:where(.button-primary,.button-secondary).has-icon-only:where(:hover),:where(.button-secondary).has-icon-only:where(:focus-visible){color:var(--kfw-color-fn-active);background-color:var(--kfw-color-background);border:var(--kfw-borderwidth-large) var(--kfw-borderstyle) var(--kfw-color-fn-active);border-radius:var(--kfw-borderradius)}.button-primary.has-icon-only:where(:focus-visible){color:var(--kfw-color-fn-active);background-color:var(--kfw-color-background);border-width:0;border-radius:var(--kfw-borderradius)}.button-primary.has-icon-only:where(:active){border-width:var(--kfw-borderwidth)}.button-secondary.has-icon-only:where(:active){color:var(--kfw-color-text-on-dark-bg);background-color:var(--kfw-color-fn-active)}.button--icon-position-left{padding-inline-start:2rem}.button--icon-position-right{padding-inline-end:2rem}.button--small{--space: .6rem;padding-block:.8rem;padding-inline:1.6rem;font-size:var(--kfw-fontsize-small)}.button--small.button--icon-position-left{padding-inline-start:1.2rem}.button--small.button--icon-position-right{padding-inline-end:1.2rem}input:not([type=submit],[type=button],[type=reset])[disabled],select[disabled],textarea[disabled],label[aria-disabled=true],:where(fieldset[disabled]) :where(input:not([type=submit],[type=button],[type=reset]),select,textarea){pointer-events:none}.searchfield{position:relative;display:flex}.searchfield__input{inline-size:100%;padding-inline-end:3rem}.searchfield__input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}.searchfield__button{position:absolute;inset-inline-end:1.5rem;inset-block-start:50%;transform:translateY(-50%)}.file-upload{display:grid;row-gap:var(--kfw-space-medium)}.file-upload__inner{display:flex;flex-direction:column;align-items:center;padding:var(--kfw-space-small) var(--kfw-space-small) var(--kfw-space-medium);background-color:var(--kfw-color-background-light-green)}.file-upload__title{margin-block-end:var(--kfw-space-medium);font-weight:var(--kfw-fontweight);text-align:center}.file-upload__input{display:none}.file-upload__icon{color:var(--kfw-color-fn);margin-block-end:2rem}:where(.container,.container-extended,.container-narrow,.container-fluid){margin-inline:auto;inline-size:100%;padding-inline:var(--kfw-safezone)}.container{max-inline-size:var(--kfw-contentwrapper-basic)}.container-extended{max-inline-size:var(--kfw-contentwrapper-extended)}.container-narrow{max-inline-size:var(--kfw-contentwrapper-narrow)}.overflow-auto{overflow:auto}}@layer icons{:root,:host{--kfw-icon-select-disabled: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%232d3134' viewBox='0 0 24 24'%3E%3Cpath fill='%23005a8c' fill-rule='evenodd' 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' style='fill:%23005a8c'/%3E%3C/svg%3E");--kfw-icon-select: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23005a8c' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' 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' style='fill:%23005a8c'/%3E%3C/svg%3E");--kfw-icon-input-datepicker: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='%23005a8c' viewBox='0 0 24 24'%3E%3Cpath d='M7.5 2a.5.5 0 0 1 .5.5V4h8V2.5c0-.277.223-.5.5-.5h1a.5.5 0 0 1 .5.5V4h3.5a.5.5 0 0 1 .5.5v17a.5.5 0 0 1-.5.5h-19a.5.5 0 0 1-.5-.5v-17c0-.277.223-.5.5-.5H6V2.5c0-.277.223-.5.5-.5ZM20 6H4v14h16zM7.5 16a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5Zm5 0a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5Zm5 0a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5Zm-10-4a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5Zm5 0a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5Zm5 0a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5Zm-10-4a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5Zm5 0a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5Zm5 0a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5Z'/%3E%3C/svg%3E");--kfw-icon-input-timepicker: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='%23005a8c' viewBox='0 0 24 24'%3E%3Cpath d='M12 2c5.5 0 10 4.5 10 10s-4.5 10-10 10S2 17.5 2 12 6.5 2 12 2m0 2c-4.4 0-8 3.6-8 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8m.4 3c.3 0 .5.2.5.5v5.3l2.6 2.6c.2.2.2.5 0 .7l-.7.7c-.2.2-.5.2-.7 0l-3.2-3.2V7.5c0-.3.2-.5.5-.5Z'/%3E%3C/svg%3E");--kfw-icon-input-upload: 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/upload%3C/title%3E%3Cpath d='M3.5 13a.5.5 0 0 1 .5.5V20h16v-6.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v8a.5.5 0 0 1-.5.5h-19a.5.5 0 0 1-.5-.5v-8a.5.5 0 0 1 .5-.5ZM12 2a1 1 0 0 1 .703.292l6.15 6.184a.5.5 0 0 1 0 .706l-.735.671a.5.5 0 0 1-.707 0l-4.415-4.448L13 16.5a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5l.005-11.095-4.416 4.448a.5.5 0 0 1-.707 0l-.735-.67a.5.5 0 0 1 0-.707l6.15-6.184A1 1 0 0 1 12 2'/%3E%3C/svg%3E");--kfw-icon-input-upload-white: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='%23fff' viewBox='0 0 24 24'%3E%3Ctitle%3Eicon/upload%3C/title%3E%3Cpath d='M3.5 13a.5.5 0 0 1 .5.5V20h16v-6.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v8a.5.5 0 0 1-.5.5h-19a.5.5 0 0 1-.5-.5v-8a.5.5 0 0 1 .5-.5ZM12 2a1 1 0 0 1 .703.292l6.15 6.184a.5.5 0 0 1 0 .706l-.735.671a.5.5 0 0 1-.707 0l-4.415-4.448L13 16.5a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5l.005-11.095-4.416 4.448a.5.5 0 0 1-.707 0l-.735-.67a.5.5 0 0 1 0-.707l6.15-6.184A1 1 0 0 1 12 2'/%3E%3C/svg%3E");--icon-size-xs: 1.4rem;--icon-size-sm: 1.6rem;--icon-size-md: 2.4rem;--icon-size-lg: 2.8rem;--icon-size-xl: 3.2rem;--icon-size-2xl: 3.6rem;--icon-size-3xl: 4rem;--icon-size-4xl: 4.8rem;--icon-size: var(--icon-size-md);--icon-only-md: 3.6rem;--icon-only-lg: 4rem;--icon-only-xl: 5.4rem;--icon-only-2xl: 5.8rem}.icon{--size: var(--icon-size);display:inline-block;flex-shrink:0;vertical-align:top;pointer-events:none;background-color:currentcolor;min-inline-size:var(--size);min-block-size:var(--size);-webkit-mask:var(--icon) center / contain no-repeat;mask:var(--icon) center / contain no-repeat}:where(a:not([role=button]),[role=link]),:where(button:not([role=link]),[role=button]){--icon-size: var(--icon-size-sm)}.icon--sm{--size: var(--icon-size-sm)}.icon--md{--size: var(--icon-size-md)}.icon--lg{--size: var(--icon-size-lg)}.icon--xl{--size: var(--icon-size-xl)}.icon--2xl{--size: var(--icon-size-2xl)}.icon--3xl{--size: var(--icon-size-3xl)}.has-icon-only{--outer-size: var(--icon-only-md);--icon-size: var(--icon-size-md);display:inline-flex;padding:0;align-items:center;justify-content:center;inline-size:var(--outer-size);block-size:var(--outer-size)}.has-icon-only:focus-visible{outline-offset:0;border-color:transparent}.has-icon-only__inner{border-radius:var(--kfw-borderradius);outline:0 var(--kfw-borderstyle) var(--kfw-color-background)}.has-icon-only--close{--outer-size: var(--icon-only-lg);border-radius:0}@media(min-width:840px){.has-icon-only--close{--outer-size: var(--icon-only-xl)}}.has-icon-only--close:where(:hover,:focus-visible){color:var(--kfw-color-text-on-dark-bg);background-color:var(--kfw-color-fn);border-color:transparent}.has-icon-only--close:focus-visible{outline:none}.has-icon-only--close:hover .has-icon-only__inner{outline-width:var(--kfw-focusring-outline-width)}.has-icon-only--close:focus-visible .has-icon-only__inner{outline-style:var(--kfw-focusring-outline-style);outline-offset:var(--kfw-focusring-outline-offset);outline-width:var(--kfw-focusring-outline-width)}.has-icon-only--close:active .has-icon-only__inner{outline-width:var(--kfw-borderwidth);outline-style:var(--kfw-borderstyle)}}@layer components{.header{position:sticky;inset-block-start:0;z-index:20;background-color:var(--kfw-color-background)}.header:after{content:"";position:absolute;inset-inline:0;inset-block-end:0;border-block-end:var(--kfw-borderwidth) solid var(--kfw-color-line-11);pointer-events:none}@media(min-width:960px){.header :where(a,button){font-size:var(--kfw-fontsize-large)}}.header__inner{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;min-block-size:5.8rem;gap:var(--kfw-space-medium)}.header__hamburger{--outer-size: 3.6rem;inline-size:var(--outer-size);block-size:var(--outer-size);display:grid;place-items:center;padding:0;justify-content:center;align-items:center}@media(min-width:840px){.header__hamburger{--outer-size: 4.8rem}}.header__hamburger:where(:active){border-width:var(--kfw-borderwidth);border-color:var(--kfw-color-fn-active)}.header__hamburger:where(:hover):not(:active){color:var(--kfw-color-text-on-dark-bg);background-color:var(--kfw-color-fn-active);border-width:0}.header__hamburger .icon{--size: var(--icon-size-2xl)}@media(min-width:840px){.header__hamburger .icon{--size: var(--icon-size-4xl)}}.header__secondary-nav{text-align:end}.header__secondary-nav .icon{margin-block-start:0}@media(min-width:840px){.header__secondary-nav .icon{margin-inline-end:.8rem}}.header__login-text{display:none}@media(min-width:840px){.header__login-text{display:inline-flex}}.header__logo{display:block;margin:0 auto;padding:0}@media(min-width:840px){.header__logo{margin-block:3rem}.header--sticky .header__logo{margin-block:0}}:where(.header__logo-small,.header__logo-large img){inline-size:auto}.header__logo-small{block-size:2.8rem}.header__logo-large{display:none;block-size:6rem;inline-size:11.1rem}@media(min-width:840px){.header__logo-small{display:none}.header__logo-large{display:block}}.header--sticky .header__logo-small{display:block}.header--sticky .header__logo-large{display:none}.footer{--kfw-focusring-outline-color: var(--kfw-color-background);border-block-start:var(--kfw-borderwidth) solid var(--kfw-color-line-11);line-height:var(--kfw-lineheight);padding-block:var(--kfw-space-medium) var(--kfw-space-large)}.footer>*{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;align-items:center}}.footer__copyright{flex-shrink:0;font-size:var(--kfw-fontsize-small)}.footer__list{list-style:none;padding:0;margin:0;display:flex;flex-flow:row wrap;max-inline-size:100%;gap:1.6rem var(--kfw-space-large);font-size:var(--kfw-fontsize-small)}.navigation{border:none;margin:0;padding:0;background-color:transparent;color:var(--kfw-color-text);position:fixed;inset-block-start:4rem;inset-inline-start:0;block-size:calc(100vb - 4rem);overflow:hidden}.navigation::backdrop{background-color:var(--kfw-color-opaque-gray-500-30)}.navigation__close{--outer-size: var(--icon-only-2xl);position:absolute;inset-block-start:0;inset-inline-end:0}.navigation__container{--min-width: 28rem;margin-block:0;min-inline-size:calc(var(--min-width) + var(--icon-only-2xl));padding-inline:0 var(--icon-only-2xl);inline-size:100%;max-block-size:100%;display:flex;flex-direction:column;inset-block-start:.6rem;inset-inline-end:.6rem;position:relative}.navigation__content{display:flex;flex-direction:column;flex:1;min-block-size:0}.navigation__nav{flex:1;min-block-size:0;overflow-block:auto;padding:calc(var(--kfw-focusring-outline-width) + var(--kfw-focusring-outline-offset));margin:calc(-1 * (var(--kfw-focusring-outline-width) + var(--kfw-focusring-outline-offset)))}.navigation__scroll-area{flex:1;min-block-size:0;display:flex;flex-direction:column;overflow:hidden;padding-inline:var(--kfw-base-space-static-40) var(--kfw-base-space-static-20);padding-block:0 var(--kfw-base-space-static-50)}.navigation__title{--fontsize: var(--kfw-base-fontsize-static-xl);margin:0;padding-inline:4rem 2rem;padding-block:1.4rem;position:relative;color:inherit;font-size:var(--fontsize)}@media(min-width:1280px){.navigation__title{--fontsize: var(--kfw-base-fontsize-static-2xl)}}.navigation__title:after{content:"";position:absolute;inset-inline:0;inset-block-end:0;border-block-end:var(--kfw-borderwidth) var(--kfw-borderstyle) var(--kfw-color-line-11);pointer-events:none}.navigation__subtitle{font-size:var(--kfw-fontsize-introduction);display:block;padding-block-start:1.4rem}:where(.navigation__title,.navigation__subtitle){text-align:center}@media(min-width:600px){:where(.navigation__title,.navigation__subtitle){text-align:inherit}}.navigation__list>li{border-block-end:var(--kfw-borderwidth-large) var(--kfw-borderstyle) var(--kfw-color-line-8);margin-block-end:0;padding-block:var(--kfw-space-small)}.navigation__list>li a{inline-size:100%}.auto-grid{display:grid;grid-template-columns:1fr;-moz-column-gap:var(--kfw-gridgap-large);column-gap:var(--kfw-gridgap-large)}@media(min-width:840px){.auto-grid{grid-template-columns:repeat(auto-fit,minmax(0,1fr))}}.auto-grid__item{margin-block-end:var(--kfw-space-small)}.hero{--hero-content-desktop-width: 42.9rem;position:relative}@media(max-width:600px){.hero__container{--kfw-safezone: 0}}.hero__bars{display:block;inline-size:100%}@media(min-width:600px){.hero__bars{display:none}}.hero__bars-desktop{display:none;inline-size:var(--hero-content-desktop-width);position:absolute;inset-block-start:4rem}@media(min-width:600px){.hero__bars-desktop{display:block}}.hero__title{inline-size: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;inline-size:var(--hero-content-desktop-width);background-color:var(--kfw-color-opaque-white-95);inset-block-start:calc(5rem + 25px);border-radius:0 0 var(--kfw-borderradius-large) 0;padding:2rem 3rem 3rem}}.hero__image{inline-size:100%;margin-inline:auto;display:block;-o-object-fit:cover;object-fit:cover;block-size:auto;max-inline-size:128rem}.color-palette{display:grid;grid-template-columns:1fr}@media(min-width:840px){.color-palette{grid-template-columns:repeat(auto-fit,minmax(0,1fr))}}.color-palette :where(button,[role=button]){white-space:normal}.color-palette__item{margin-block-end:var(--kfw-space-small)}.color-palette__label{text-wrap:balance;display:block;padding:.5rem;margin-block-end:0}.color-palette__container{text-align:center;padding-inline:var(--kfw-space-xsmall)}.color-palette__color{display:block;inline-size:100%;block-size:3rem;border:var(--kfw-borderwidth) solid transparent;border-inline-width:0;border-block-color:var(--kfw-color-fn-inactive);border-inline-start:var(--kfw-borderwidth) solid var(--kfw-color-fn-inactive);border-inline-end:var(--kfw-borderwidth) solid var(--kfw-color-fn-inactive)}@media(min-width:840px){.color-palette__color{border-inline-start:0;border-inline-end:0}.color-palette__item:first-child .color-palette__color{border-inline-start:var(--kfw-borderwidth) solid var(--kfw-color-fn-inactive)}.color-palette__item:last-child .color-palette__color{border-inline-end:var(--kfw-borderwidth) solid var(--kfw-color-fn-inactive)}}.spacing-demo{display:flex;flex-direction:column;gap:var(--kfw-space-xsmall);margin-block-end:var(--kfw-space-big)}.spacing-demo__item{display:flex;align-items:center;gap:var(--kfw-space-small)}.spacing-demo__visual{block-size:3rem;background-color:var(--kfw-color-fn);border-radius:var(--kfw-borderradius-small)}.spacing-demo__label{font-family:var(--kfw-fontfamily-code);font-size:var(--kfw-fontsize-small);min-inline-size:20rem}.custom-form{inline-size:100%;max-inline-size:var(--kfw-contentwrapper-narrow)}table.file-upload-table{border-block-start:0;min-block-size:1rem;min-inline-size:50rem}table.file-upload-table :where(.file-upload-table__error,.file-upload-table__success,.file-upload-table__info){grid-column:1 / span 3}table.file-upload-table :where(.form-text,.invalid-feedback,.valid-feedback){margin-block-start:0}table.file-upload-table tr{--name: calc(100% - var(--size) - var(--action));--size: 30%;--action: 15%;display:grid;grid-template-columns:var(--name) var(--size) var(--action);inline-size:100%;border-block-start:var(--kfw-borderwidth) solid var(--kfw-color-line-10)}table.file-upload-table tr:not(:last-of-type){border-block-end:0}@media(min-width:600px){table.file-upload-table tr{--size: 25%;--action: 25%}}@media(min-width:960px){table.file-upload-table tr{--action: 20%}}table.file-upload-table .file-upload-table__filename{overflow-wrap:break-word}:where(.hl--sb,.hl--tb,.hl--hb,.hl--ms){display:block;line-height:var(--kfw-lineheight-heading);letter-spacing:var(--kfw-base-letterspacing-normal);margin-block-end:var(--kfw-space-medium)}.hl--sb{font-size:var(--kfw-fontsize-introduction)}@media(min-width:1280px){.hl--sb{font-size:var(--kfw-base-fontsize-static-5xl);line-height:var(--kfw-lineheight-small)}}.hl--tb{font-size:var(--kfw-fontsize-heading-4)}@media(min-width:1280px){.hl--tb{line-height:var(--kfw-lineheight-large)}}.hl--hb{font-size:var(--kfw-fontsize-introduction)}@media(min-width:840px){.hl--hb{font-size:var(--kfw-base-fontsize-static-3xl);letter-spacing:var(--kfw-base-letterspacing-tight)}}@media(min-width:1280px){.hl--hb{font-size:var(--kfw-base-fontsize-static-5xl);line-height:var(--kfw-lineheight-small);letter-spacing:0}}.hl--ms{margin-block-end:var(--kfw-space-xsmall);font-size:var(--kfw-fontsize-introduction)}@media(min-width:840px){.hl--ms{font-size:var(--kfw-fontsize-large);line-height:var(--kfw-lineheight-heading-5)}}.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)}.tx--8{line-height:var(--kfw-lineheight-heading);letter-spacing:var(--kfw-base-letterspacing-normal);font-size:var(--kfw-fontsize-large)}}@layer utilities{: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)}:where(.bg-dark,.footer) :where(a:not([role=button]),[role=link]):where(:active){--link-background: var(--kfw-color-fn-active)}:where(.bg-dark,.footer) :where(.button-primary){--button-color: var(--kfw-color-fn-active);--button-bg: var(--kfw-color-text-on-dark-bg);--button-border-color: var(--kfw-color-text-on-dark-bg);--button-bg-hover: var(--kfw-color-text-on-dark-bg);--button-color-hover: var(--button-color);--button-border-color-hover: var(--kfw-color-text-on-dark-bg)}:where(.bg-dark,.footer) :where(.button-secondary){--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-fn-active);--button-border-color-hover: var(--kfw-color-text-on-dark-bg)}:where(.bg-dark,.footer) :where(.button-primary.has-icon-only:where(:hover,:focus-visible)),:where(.bg-dark,.footer) :where(.button-secondary.has-icon-only:where(:hover,:focus-visible)){color:var(--kfw-color-text-on-dark-bg);background-color:var(--kfw-color-fn-active);border-width:var(--kfw-borderradius-small)}:where(.bg-dark,.footer) :where(.button-primary.has-icon-only:where(:hover)),:where(.bg-dark,.footer) :where(.button-secondary.has-icon-only:where(:hover)){border-color:var(--kfw-color-text-on-dark-bg)}:where(.bg-dark,.footer) :where(.button-primary.has-icon-only:where(:active)),:where(.bg-dark,.footer) :where(.button-secondary.has-icon-only:where(:active)){border-width:var(--kfw-borderwidth)}.bg-subtle{background-color:var(--kfw-color-background-subtle)}.bg-light{background-color:var(--kfw-color-background-light-blue)}.bg-white{background-color:var(--kfw-color-background)}.visually-hidden{clip:rect(0 0 0 0);clip-path:inset(50%);block-size:1px;overflow:hidden;position:absolute;white-space:nowrap;inline-size:1px}.d-block{display:block}.d-inline{display:inline}.d-inline-block{display:inline-block}.d-inline-flex{display:inline-flex}.my-lg{margin-block:var(--kfw-space-large)}.m-auto{margin-inline:auto}.p-0{padding:0}.p-sm{padding:var(--kfw-space-small)}.mb-0{margin-block-end:0}.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)}.grid-padding-x{padding-inline:var(--kfw-gridgap-large)}.grid-padding-y{padding-block:var(--kfw-gridgap-large)}.grid-margin-x{margin-inline:var(--kfw-gridgap-large)}.grid-margin-y{margin-block:var(--kfw-gridgap-large)}.t-center{text-align:center}.relative{position:relative}.static{position:static}.fixed{position:fixed}.sticky{position:sticky}.absolute{position:absolute}}
|
package/demo/src/App.ts
ADDED
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import { initializeNavigation } from "./Navigation.js"
|
|
2
|
+
import { initializeStickyHeader } from "./StickyHeader.js"
|
|
3
|
+
import { initializeColorPalettes } from "./ColorPalette.js"
|
|
4
|
+
|
|
5
|
+
// Initialize navigation (hamburger menu and offcanvas dialog)
|
|
6
|
+
initializeNavigation()
|
|
7
|
+
|
|
8
|
+
// Initialize sticky header behavior
|
|
9
|
+
initializeStickyHeader()
|
|
10
|
+
|
|
11
|
+
// Initialize color palette rendering
|
|
12
|
+
initializeColorPalettes()
|
|
@@ -0,0 +1,84 @@
|
|
|
1
|
+
declare global {
|
|
2
|
+
interface Window {
|
|
3
|
+
allTokens: AllTokens
|
|
4
|
+
}
|
|
5
|
+
}
|
|
6
|
+
|
|
7
|
+
interface TokenValue {
|
|
8
|
+
$description?: string
|
|
9
|
+
$value?: string
|
|
10
|
+
name?: string
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
interface TokenGroup {
|
|
14
|
+
[key: string]: TokenValue | TokenGroup
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
interface AllTokens {
|
|
18
|
+
semantic?: {
|
|
19
|
+
color?: TokenGroup
|
|
20
|
+
}
|
|
21
|
+
base?: {
|
|
22
|
+
color?: TokenGroup
|
|
23
|
+
}
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
function getByPath(obj: TokenGroup, path: string): TokenValue | undefined {
|
|
27
|
+
return path.split(".").reduce<TokenGroup | TokenValue | undefined>((o, k) => {
|
|
28
|
+
if (!o || typeof o !== "object") return undefined
|
|
29
|
+
return o[k as keyof typeof o] as TokenGroup | TokenValue | undefined
|
|
30
|
+
}, obj)
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
function createColorPaletteItem(colorEl: HTMLElement, tokenGroup: string, tokenName: string | undefined): void {
|
|
34
|
+
colorEl.classList.add("color-palette__color")
|
|
35
|
+
|
|
36
|
+
const tokenKey = colorEl.dataset.token
|
|
37
|
+
if (!tokenKey) return
|
|
38
|
+
|
|
39
|
+
const wrapper = document.createElement("div")
|
|
40
|
+
wrapper.className = "color-palette__item"
|
|
41
|
+
|
|
42
|
+
const container = document.createElement("div")
|
|
43
|
+
container.className = "color-palette__container"
|
|
44
|
+
|
|
45
|
+
const desc = document.createElement("span")
|
|
46
|
+
desc.className = "color-palette__label form-label"
|
|
47
|
+
|
|
48
|
+
const btn = document.createElement("button")
|
|
49
|
+
btn.type = "button"
|
|
50
|
+
btn.role = "link"
|
|
51
|
+
|
|
52
|
+
btn.addEventListener("click", () => {
|
|
53
|
+
navigator.clipboard.writeText(`var(--${btn.textContent})`).catch((err) => {
|
|
54
|
+
console.error("Failed to copy to clipboard:", err)
|
|
55
|
+
})
|
|
56
|
+
})
|
|
57
|
+
|
|
58
|
+
const tokenColorPath =
|
|
59
|
+
tokenName !== undefined
|
|
60
|
+
? window.allTokens[tokenGroup as keyof AllTokens]?.color?.[tokenName]
|
|
61
|
+
: window.allTokens[tokenGroup as keyof AllTokens]?.color
|
|
62
|
+
const token = tokenColorPath ? getByPath(tokenColorPath as TokenGroup, tokenKey) : undefined
|
|
63
|
+
|
|
64
|
+
desc.textContent = token?.$description || ""
|
|
65
|
+
btn.textContent = token?.name || "var(--kfw-color-fn)"
|
|
66
|
+
|
|
67
|
+
colorEl.style.backgroundColor = token?.$value || ""
|
|
68
|
+
colorEl.replaceWith(wrapper)
|
|
69
|
+
wrapper.appendChild(colorEl)
|
|
70
|
+
wrapper.appendChild(container)
|
|
71
|
+
container.appendChild(desc)
|
|
72
|
+
container.appendChild(btn)
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
export function initializeColorPalettes(): void {
|
|
76
|
+
document.querySelectorAll<HTMLElement>(".color-palette").forEach((palette) => {
|
|
77
|
+
const tokenGroup = palette.dataset.group || "semantic"
|
|
78
|
+
const tokenName = palette.dataset.name
|
|
79
|
+
|
|
80
|
+
palette.querySelectorAll<HTMLElement>("span[data-token]").forEach((colorEl) => {
|
|
81
|
+
createColorPaletteItem(colorEl, tokenGroup, tokenName)
|
|
82
|
+
})
|
|
83
|
+
})
|
|
84
|
+
}
|
|
@@ -0,0 +1,55 @@
|
|
|
1
|
+
export function initializeNavigation(): void {
|
|
2
|
+
const body = document.body
|
|
3
|
+
const hamburger = document.querySelector<HTMLElement>(".header__hamburger")
|
|
4
|
+
const dialog = document.getElementById("main-nav") as HTMLDialogElement | null
|
|
5
|
+
|
|
6
|
+
if (!hamburger || !dialog) return
|
|
7
|
+
|
|
8
|
+
const dialogContent = dialog.querySelector<HTMLElement>("[data-dialog-content]")
|
|
9
|
+
|
|
10
|
+
const openNav = (): void => {
|
|
11
|
+
hamburger.setAttribute("aria-expanded", "true")
|
|
12
|
+
body.classList.add("no-scroll")
|
|
13
|
+
dialog.showModal()
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
const closeNav = (): void => {
|
|
17
|
+
body.classList.remove("no-scroll")
|
|
18
|
+
hamburger.setAttribute("aria-expanded", "false")
|
|
19
|
+
hamburger.focus()
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
hamburger.addEventListener("click", openNav)
|
|
23
|
+
|
|
24
|
+
dialog.addEventListener("close", closeNav)
|
|
25
|
+
|
|
26
|
+
dialog.addEventListener("click", (event) => {
|
|
27
|
+
const target = event.target as HTMLElement | null
|
|
28
|
+
|
|
29
|
+
if (!target) return
|
|
30
|
+
|
|
31
|
+
const anchor = target.closest("a")
|
|
32
|
+
|
|
33
|
+
if (anchor) {
|
|
34
|
+
event.preventDefault() // Prevent immediate navigation, so we can scroll only after closing (after removing overflow: hidden)
|
|
35
|
+
dialog.close()
|
|
36
|
+
|
|
37
|
+
const href = anchor.getAttribute("href")
|
|
38
|
+
if (!href) return
|
|
39
|
+
|
|
40
|
+
if (href.startsWith("#")) {
|
|
41
|
+
const scrollTarget = document.querySelector(href)
|
|
42
|
+
if (scrollTarget) {
|
|
43
|
+
scrollTarget.scrollIntoView({ behavior: "instant" })
|
|
44
|
+
}
|
|
45
|
+
} else {
|
|
46
|
+
window.location.href = href
|
|
47
|
+
}
|
|
48
|
+
return
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
if (!dialogContent?.contains(target)) {
|
|
52
|
+
dialog.close()
|
|
53
|
+
}
|
|
54
|
+
})
|
|
55
|
+
}
|