@openkfw/design-tokens 0.7.0 → 1.0.2

package/demo/src/style.css

@@ -1,2023 +0,0 @@
-/* -------------------------------------------------------------------------
-   Establish the order of layers upfront
-   ------------------------------------------------------------------------- */
-@layer reset, tokens, base, icons, components, utilities;
-
-/* -------------------------------------------------------------------------
-   Custom Media Queries
-   ------------------------------------------------------------------------- */
-@import url("vendor/gen-custom-media.css");
-
-/* -------------------------------------------------------------------------
-   Reset & Normalize
-   ------------------------------------------------------------------------- */
-@import url("uaplus/uaplus.css") layer(reset);
-
-/* -------------------------------------------------------------------------
-   KfW Design Tokens
-   ------------------------------------------------------------------------- */
-@import url("@openkfw/design-tokens/output/css/kfw-design-tokens.light.css") layer(tokens);
-
-/* -------------------------------------------------------------------------
-   Icons
-   ------------------------------------------------------------------------- */
-@import url("vendor/gen-icons.css") layer(icons);
-
-/* -------------------------------------------------------------------------
-   Additional Tokens
-   ------------------------------------------------------------------------- */
-
-/* Shorthand variables and overrides for parent elements */
-@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: 0.2rem;
-    --kfw-invalid-border-offset: 1rem;
-  }
-
-  @media (--kfw-breakpoint-mobile) {
-    :root,
-    :host {
-      --kfw-safezone: var(--kfw-safezone-tablet);
-    }
-  }
-
-  @media (--kfw-breakpoint-desktop) {
-    :root,
-    :host {
-      --kfw-safezone: var(--kfw-safezone-desktop);
-    }
-  }
-
-  @media (--kfw-breakpoint-desktop-large) {
-    :root,
-    :host {
-      --kfw-safezone: var(--kfw-safezone-desktop-large);
-    }
-  }
-}
-
-/* -------------------------------------------------------------------------
-   Base Styles
-   ------------------------------------------------------------------------- */
-@layer base {
-  :root,
-  :host {
-    font-size: 62.5%; /* 1rem = 10px */
-    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; /* Height of sticky header */
-  }
-
-  :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);
-  }
-
-  /* Reset default body styles */
-  body {
-    margin: 0;
-    font-size: 1.6rem; /* Set 16px as default */
-  }
-
-  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); /* overwrite  user-agent font-size: smaller; */
-  }
-
-  :where(sub, sup) {
-    position: relative;
-    line-height: 0;
-    vertical-align: baseline;
-    font-size: 75%;
-  }
-
-  sub {
-    inset-block-end: -0.25em;
-  }
-
-  sup {
-    inset-block-start: -0.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: 0.125rem 0.25rem;
-    vertical-align: baseline;
-    background-color: var(--kfw-color-background-medium-green);
-    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::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::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;
-  }
-
-  /**
-  * Lists
-  */
-  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;
-    mask-size: contain;
-    mask-position: center;
-    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;
-  }
-
-  /* Numbered and Lettered Lists */
-  :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);
-  }
-
-  /* Check and Big Check Lists */
-  :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);
-    mask-image: var(--icon);
-    background-color: var(--kfw-color-background-dark-green);
-    inset-block-start: 0.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: -0.1rem;
-    mask-image: var(--icon);
-    background-color: var(--kfw-color-background-dark-green);
-  }
-
-  @media (--kfw-breakpoint-desktop-large) {
-    .list--big-checks > .list-item {
-      --size: var(--icon-size-xl);
-      --space: 1rem;
-    }
-
-    .list--big-checks > .list-item::before {
-      inset-block-start: -0.3rem;
-    }
-  }
-
-  /* Icon Lists */
-  .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);
-    mask-image: var(--icon);
-    background-color: var(--icon-color);
-    inset-block-start: -0.1rem;
-  }
-
-  /* Bullet Lists */
-  .list--bullets > .list-item {
-    --icon-size-md: 0.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: 0.8rem;
-    mask-image: var(--kfw-icon-bullet-point);
-    background-color: currentcolor;
-  }
-
-  .list--bullets-empty > .list-item::before {
-    mask-image: var(--kfw-icon-bullet-point-empty);
-    background-color: currentcolor;
-  }
-
-  /**
-  * Table
-  */
-
-  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);
-  }
-
-  /**
-   * Embedded content
-   */
-  :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] {
-    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 (--kfw-breakpoint-desktop-large) {
-    :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 (--kfw-breakpoint-desktop-large) {
-    :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 (--kfw-breakpoint-desktop-large) {
-    :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);
-  }
-
-  /**
-  * Form
-  */
-  :where(.form-control, .form-select) {
-    --borderhover: var(--kfw-color-fn-active);
-    --placeholder-color: var(--kfw-color-fn);
-
-    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::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;
-  }
-
-  /**
-  * Select
-  */
-  .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: 0.5rem;
-
-    white-space: pre-line;
-    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) + 0.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;
-    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: 0.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: 0.4rem;
-  }
-
-  .list-group-form :where([type="checkbox"], [type="radio"]) {
-    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: 0.9rem;
-    transform: translate(-50%, -50%) rotate(314deg);
-    margin-block-start: -1px;
-    border-block-end-width: 0.225rem;
-    border-inline-start-width: 0.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 (--kfw-breakpoint-mobile) {
-    .list-group-form--inline {
-      flex-flow: row wrap;
-    }
-  }
-
-  /* Focus styling for invalid states, keyboard users */
-  [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; /* rest native icon */
-    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: 0.5rem;
-
-    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: 0.8rem;
-
-    font-family: var(--kfw-fontfamily);
-    font-weight: var(--kfw-fontweight);
-    border-radius: var(--kfw-borderradius);
-    display: inline-flex;
-    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: 0.6rem;
-
-    padding-block: 0.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
-  */
-  .searchfield {
-    position: relative;
-    display: flex;
-  }
-
-  .searchfield__input {
-    inline-size: 100%;
-    padding-inline-end: 3rem;
-  }
-
-  .searchfield__input::-webkit-search-cancel-button {
-    appearance: none;
-  }
-
-  .searchfield__button {
-    position: absolute;
-    inset-inline-end: 1.5rem;
-    inset-block-start: 50%;
-    transform: translateY(-50%);
-  }
-
-  /**
-  * File-Upload
-  */
-  .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;
-  }
-
-  /**
-  * Container
-  */
-  :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 (e.g. for code blocks, tables)
-  */
-  .overflow-auto {
-    overflow: auto;
-  }
-}
-
-/* -------------------------------------------------------------------------
-   Base64 Icons, Standard Sizes & Helper Classes
-   ------------------------------------------------------------------------- */
-
-/*
-  This layer provides:
-    1. Base64-encoded icons used as a fallback for elements that don’t support
-       pseudo-elements, so mask-image cannot be applied (e.g., <input>, <select>)
-    2. Standard icon size variables for consistent sizing.
-    3. Helper classes for common icon patterns, e.g., sizing
-       (.icon--md) and icon-only containers (.has-icon-only).
-*/
-@layer icons {
-  :root,
-  :host {
-    /* base64 icons */
-    --kfw-icon-select-disabled: svg-load("icons/arrow-down.svg", "var(--kfw-color-text)");
-    --kfw-icon-select: svg-load("icons/arrow-down.svg", "var(--kfw-color-fn)");
-    --kfw-icon-input-datepicker: svg-load("icons/calendar.svg", "var(--kfw-color-fn)");
-    --kfw-icon-input-timepicker: svg-load("icons/time.svg", "var(--kfw-color-fn)");
-    --kfw-icon-input-upload: svg-load("icons/upload.svg", "var(--kfw-color-fn)");
-    --kfw-icon-input-upload-white: svg-load("icons/upload.svg", "var(--kfw-color-background)");
-
-    /* icon sizes */
-    --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);
-    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;
-  }
-
-  /* Necessary to style the outline around the icon, as it is not possible to apply it directly to masked elements */
-  .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 (--kfw-breakpoint-tablet) {
-    .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);
-  }
-}
-
-/* -------------------------------------------------------------------------
-   Components
-   ------------------------------------------------------------------------- */
-@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 (--kfw-breakpoint-desktop) {
-    .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 (--kfw-breakpoint-tablet) {
-    .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 (--kfw-breakpoint-tablet) {
-    .header__hamburger .icon {
-      --size: var(--icon-size-4xl);
-    }
-  }
-
-  .header__secondary-nav {
-    text-align: end;
-  }
-
-  .header__secondary-nav .icon {
-    margin-block-start: 0;
-  }
-
-  @media (--kfw-breakpoint-tablet) {
-    .header__secondary-nav .icon {
-      margin-inline-end: 0.8rem;
-    }
-  }
-
-  .header__login-text {
-    display: none;
-  }
-
-  @media (--kfw-breakpoint-tablet) {
-    .header__login-text {
-      display: inline-flex;
-    }
-  }
-
-  .header__logo {
-    display: block;
-    margin: 0 auto;
-    padding: 0;
-  }
-
-  @media (--kfw-breakpoint-tablet) {
-    .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 (--kfw-breakpoint-tablet) {
-    .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 (--kfw-breakpoint-desktop) {
-    .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: 0.6rem;
-    inset-inline-end: 0.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 (--kfw-breakpoint-desktop-large) {
-    .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 (--kfw-breakpoint-mobile) {
-    :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;
-    column-gap: var(--kfw-gridgap-large);
-  }
-
-  @media (--kfw-breakpoint-tablet) {
-    .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 (--kfw-breakpoint-mobile-max) {
-    .hero__container {
-      --kfw-safezone: 0;
-    }
-  }
-
-  .hero__bars {
-    display: block;
-    inline-size: 100%;
-  }
-
-  @media (--kfw-breakpoint-mobile) {
-    .hero__bars {
-      display: none;
-    }
-  }
-
-  .hero__bars-desktop {
-    display: none;
-    inline-size: var(--hero-content-desktop-width);
-    position: absolute;
-    inset-block-start: 4rem;
-  }
-
-  @media (--kfw-breakpoint-mobile) {
-    .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 (--kfw-breakpoint-mobile) {
-    .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(4rem + 1rem + 25px); /* outsidePaddingTop + 10px space + barsHeight */
-      border-radius: 0 0 var(--kfw-borderradius-large) 0;
-      padding: 2rem 3rem 3rem;
-    }
-  }
-
-  .hero__image {
-    inline-size: 100%;
-    margin-inline: auto;
-    display: block;
-    object-fit: cover;
-    block-size: auto;
-    max-inline-size: 128rem;
-  }
-
-  .color-palette {
-    display: grid;
-    grid-template-columns: 1fr;
-  }
-
-  @media (--kfw-breakpoint-tablet) {
-    .color-palette {
-      grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
-    }
-  }
-
-  .color-palette :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: 0.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 (--kfw-breakpoint-tablet) {
-    .color-palette__color {
-      border-inline-start: 0;
-      border-inline-end: 0;
-    }
-
-    .color-palette__item:first-child .color-palette__color {
-      border-inline-start: var(--kfw-borderwidth) solid var(--kfw-color-fn-inactive);
-    }
-
-    .color-palette__item:last-child .color-palette__color {
-      border-inline-end: var(--kfw-borderwidth) solid var(--kfw-color-fn-inactive);
-    }
-  }
-
-  .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 (--kfw-breakpoint-mobile) {
-    table.file-upload-table tr {
-      --size: 25%;
-      --action: 25%;
-    }
-  }
-
-  @media (--kfw-breakpoint-desktop) {
-    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 (--kfw-breakpoint-desktop-large) {
-    .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 (--kfw-breakpoint-desktop-large) {
-    .hl--tb {
-      line-height: var(--kfw-lineheight-large);
-    }
-  }
-
-  .hl--hb {
-    font-size: var(--kfw-fontsize-introduction);
-  }
-
-  @media (--kfw-breakpoint-tablet) {
-    .hl--hb {
-      font-size: var(--kfw-base-fontsize-static-3xl);
-      letter-spacing: var(--kfw-base-letterspacing-tight);
-    }
-  }
-
-  @media (--kfw-breakpoint-desktop-large) {
-    .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 (--kfw-breakpoint-tablet) {
-    .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);
-  }
-}
-
-/* -------------------------------------------------------------------------
-   Utility Classes
-   ------------------------------------------------------------------------- */
-@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); /* stylelint-disable-line property-no-deprecated */
-    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;
-  }
-}