@charset "UTF-8";
:root .c-button,
[ks-theme] .c-button,
[ks-inverted] .c-button {
  --c-button--padding: var(--ks-spacing-inset-squish-m);
}
:root .c-button--small,
[ks-theme] .c-button--small,
[ks-inverted] .c-button--small {
  --c-button--padding: var(--ks-spacing-inset-squish-s);
}
:root .c-button--large,
[ks-theme] .c-button--large,
[ks-inverted] .c-button--large {
  --c-button--padding: var(--ks-spacing-inset-squish-l);
}
:root .c-button--solid, :root .c-button--solid-inverted,
[ks-theme] .c-button--solid,
[ks-theme] .c-button--solid-inverted,
[ks-inverted] .c-button--solid,
[ks-inverted] .c-button--solid-inverted {
  --c-button--border-color: var(--c-button--background-color);
  --c-button--border-color-hover: var(--c-button--background-color-hover);
}
:root .c-button--outline, :root .c-button--outline-inverted,
[ks-theme] .c-button--outline,
[ks-theme] .c-button--outline-inverted,
[ks-inverted] .c-button--outline,
[ks-inverted] .c-button--outline-inverted {
  --c-button--border-width: var(--ks-border-width-default);
}
:root .c-button--outline,
[ks-theme] .c-button--outline,
[ks-inverted] .c-button--outline {
  --c-button--border-color: var(--ks-border-color-primary-interactive);
  --c-button--border-color-hover: var(
    --ks-border-color-primary-interactive-hover
  );
}
:root .c-button--outline-inverted,
[ks-theme] .c-button--outline-inverted,
[ks-inverted] .c-button--outline-inverted {
  --c-button--border-color: var(
    --ks-border-color-primary-inverted-interactive
  );
  --c-button--border-color-hover: var(
    --ks-border-color-primary-inverted-interactive-hover
  );
}
:root .c-collapsible-box,
[ks-theme] .c-collapsible-box,
[ks-inverted] .c-collapsible-box {
  --c-collapsible-box--border-color: var(--ks-border-color-accent);
}
:root .c-collapsible-box details,
[ks-theme] .c-collapsible-box details,
[ks-inverted] .c-collapsible-box details {
  border-width: var(--ks-border-width-default);
}
:root .c-collapsible-box__header__icon,
[ks-theme] .c-collapsible-box__header__icon,
[ks-inverted] .c-collapsible-box__header__icon {
  color: var(--c-collapsible-box_icon--color);
  --c-collapsible-box_icon--color: var(--g-topic--color);
}
:root .c-collapsible-box__header__text,
[ks-theme] .c-collapsible-box__header__text,
[ks-inverted] .c-collapsible-box__header__text {
  color: var(--c-collapsible-box_header--color);
  --c-collapsible-box_header--color: var(--g-topic--color);
}
:root .c-content-box,
[ks-theme] .c-content-box,
[ks-inverted] .c-content-box {
  margin-bottom: var(--c-content-box--margin-bottom);
  --c-content-box--margin-bottom: 0;
  gap: var(--c-content-box--gap);
  --c-content-box--gap: var(--ks-spacing-stack-m);
  --c-content-box_topic--color: var(--g-topic--color);
}
:root .c-content-box__body,
[ks-theme] .c-content-box__body,
[ks-inverted] .c-content-box__body {
  gap: var(--c-content-box-body--gap);
  --c-content-box-body--gap: var(--ks-spacing-stack-m);
}
:root .c-content-box__link,
[ks-theme] .c-content-box__link,
[ks-inverted] .c-content-box__link {
  margin-top: unset;
}
:root .c-content-box__image,
[ks-theme] .c-content-box__image,
[ks-inverted] .c-content-box__image {
  margin-bottom: unset;
}
:root .c-divider,
[ks-theme] .c-divider,
[ks-inverted] .c-divider {
  --c-divider--height: var(--ks-border-width-default);
  --c-divider--background: var(--ks-border-color-accent);
}
:root .c-rich-text,
[ks-theme] .c-rich-text,
[ks-inverted] .c-rich-text {
  --c-rich-text--vertical-spacing: 1em;
}
:root header.c-headline,
[ks-theme] header.c-headline,
[ks-inverted] header.c-headline {
  margin-bottom: 0;
}
:root header.c-headline h4,
[ks-theme] header.c-headline h4,
[ks-inverted] header.c-headline h4 {
  --c-rich-text_headline--font: var(--ks-font-display-m);
}
:root header.c-headline h5,
[ks-theme] header.c-headline h5,
[ks-inverted] header.c-headline h5 {
  --c-rich-text_headline--font: var(--ks-font-display-s);
}
:root header.c-headline h6,
[ks-theme] header.c-headline h6,
[ks-inverted] header.c-headline h6 {
  --c-rich-text_headline--font: var(--ks-font-display-xs);
}
:root .c-quote__source,
[ks-theme] .c-quote__source,
[ks-inverted] .c-quote__source {
  color: var(--ks-text-color-interface);
}
:root .c-teaser,
[ks-theme] .c-teaser,
[ks-inverted] .c-teaser {
  --c-teaser--border-radius: var(--ks-border-radius-card);
}
:root .l-container--teaser-box, :root .l-container--content-box,
[ks-theme] .l-container--teaser-box,
[ks-theme] .l-container--content-box,
[ks-inverted] .l-container--teaser-box,
[ks-inverted] .l-container--content-box {
  display: contents;
}

:root .c-button,
[ks-inverted] .c-button,
[ks-theme] .c-button {
  --c-button--padding: 0.6em 1.25em;
  --c-button--font: var(--ks-font-interface-l);
}
:root .c-button--small.c-button,
[ks-inverted] .c-button--small.c-button,
[ks-theme] .c-button--small.c-button {
  --c-button--font: var(--ks-font-interface-m);
}
:root .c-button--large.c-button,
[ks-inverted] .c-button--large.c-button,
[ks-theme] .c-button--large.c-button {
  --c-button--font: var(--ks-font-interface-xl);
}
:root .c-button--primary,
[ks-inverted] .c-button--primary,
[ks-theme] .c-button--primary {
  --c-button--border-width: 0;
  --c-button--background-color: var(
    --ks-background-color-primary-interactive
  );
  --c-button--background-color-hover: var(
    --ks-background-color-primary-interactive-hover
  );
  --c-button--background-color-active: var(
    --ks-background-color-primary-interactive-active
  );
  --c-button--background-color-selected: var(
    --ks-background-color-primary-interactive-active
  );
  --c-button--color: var(--ks-color-fg-inverted);
  --c-button--color-hover: var(--ks-color-fg-inverted);
  --c-button--color-active: var(--ks-color-fg-inverted);
  --c-button--color-selected: var(--ks-color-fg-inverted);
}
:root .c-button--secondary,
[ks-inverted] .c-button--secondary,
[ks-theme] .c-button--secondary {
  --c-button--border-width: 0;
  --c-button--background-color: var(--ks-color-fg-to-bg-8);
  --c-button--background-color-hover: var(--ks-color-fg-to-bg-7);
  --c-button--background-color-active: var(--ks-color-fg-to-bg-7);
  --c-button--background-color-selected: var(--ks-color-fg-to-bg-7);
  --c-button--color: var(--ks-color-fg-to-bg-3);
  --c-button--color-hover: var(--ks-color-fg-to-bg-3);
  --c-button--color-active: var(--ks-color-fg-to-bg-3);
  --c-button--color-selected: var(--ks-color-fg-to-bg-3);
}
:root .c-button--ghost,
[ks-inverted] .c-button--ghost,
[ks-theme] .c-button--ghost {
  --c-button--border-width: 0;
  --c-button--background-color: var(--ks-background-color-default);
  --c-button--background-color-hover: var(--ks-color-fg-to-bg-8);
  --c-button--background-color-active: var(--ks-color-fg-to-bg-8);
  --c-button--background-color-selected: var(--ks-color-fg-to-bg-8);
  --c-button--color: var(--ks-color-fg-to-bg-3);
  --c-button--color-hover: var(--ks-color-fg-to-bg-3);
  --c-button--color-active: var(--ks-color-fg-to-bg-3);
  --c-button--color-selected: var(--ks-color-fg-to-bg-3);
}
:root .c-button--select,
[ks-inverted] .c-button--select,
[ks-theme] .c-button--select {
  --c-button--border-width: var(--ks-border-width-default);
  --c-button--color: var(--ks-text-color-interface-interactive);
  --c-button--color-hover: var(--ks-text-color-interface-interactive-hover);
  --c-button--color-selected: var(
    --ks-text-color-interface-interactive-active
  );
  --c-button--border-color: var(--ks-border-color-interface-interactive);
  --c-button--border-color-hover: var(
    --ks-border-color-interface-interactive-hover
  );
  --c-button--border-color-selected: var(
    --ks-border-color-interface-interactive-active
  );
  --c-button--box-shadow-selected: 0px 0px 20px
    var(--ks-box-shadow-color-card);
}
:root .c-button--warning,
[ks-inverted] .c-button--warning,
[ks-theme] .c-button--warning {
  --c-button--color: var(--ks-color-notice);
  --c-button--color-hover: var(--ks-color-fg-inverted);
  --c-button--background-color: var(--ks-color-notice-to-bg-8);
  --c-button--background-color-hover: var(--ks-color-notice);
}

:root .c-button--small .icon,
[ks-inverted] .c-button--small .icon,
[ks-theme] .c-button--small .icon {
  margin: 0 var(--ks-spacing-xxs);
}
:root .c-button--small .icon:first-child,
[ks-inverted] .c-button--small .icon:first-child,
[ks-theme] .c-button--small .icon:first-child {
  margin-left: 0;
}
:root .c-button--icon-above,
[ks-inverted] .c-button--icon-above,
[ks-theme] .c-button--icon-above {
  display: flex;
  flex-direction: column;
  gap: var(--ks-spacing-stack-xs);
}
:root .c-button--icon-above .icon:first-child,
[ks-inverted] .c-button--icon-above .icon:first-child,
[ks-theme] .c-button--icon-above .icon:first-child {
  margin: 0;
}
:root .c-button[aria-pressed=true],
[ks-inverted] .c-button[aria-pressed=true],
[ks-theme] .c-button[aria-pressed=true] {
  background-color: var(--c-button--background-color-selected);
  border-color: var(--c-button--border-color-selected);
  color: var(--c-button--color-selected);
  box-shadow: var(--c-button--box-shadow-selected);
}
:root .c-button--loading .icon,
[ks-inverted] .c-button--loading .icon,
[ks-theme] .c-button--loading .icon {
  animation: spin 1s linear infinite;
}
:root .c-button:disabled,
[ks-inverted] .c-button:disabled,
[ks-theme] .c-button:disabled {
  cursor: not-allowed;
}
:root .c-button:disabled:hover,
[ks-inverted] .c-button:disabled:hover,
[ks-theme] .c-button:disabled:hover {
  background-color: var(--c-button--background-color);
}

:root .c-rounded-button {
  --c-rounded-button--padding: 0.5rem;
  --c-button--padding: var(--c-rounded-button--padding) !important;
  --c-button--border-radius: var(--ks-border-radius-circle);
  --c-button--icon-size: calc(
    var(--ks-line-height-interface-l) * var(--ks-font-size-interface-l)
  );
}
:root .c-rounded-button.c-button--small {
  --c-rounded-button--padding: 0.35rem;
  --c-button--icon-size: calc(
    var(--ks-line-height-interface-s) * var(--ks-font-size-interface-s)
  );
}
:root .c-rounded-button.c-button--large {
  --c-button--icon-size: calc(
    var(--ks-line-height-interface-xl) * var(--ks-font-size-interface-xl)
  );
}
:root .c-rounded-button > * {
  width: var(--c-button--icon-size);
  height: var(--c-button--icon-size);
  overflow: hidden;
}

.wlp-button-group {
  --wlp-button-group--gap: var(--ks-spacing-inline-xs);
  --wlp-button-group__col--min-width: 10rem;
}
.wlp-button-group .c-button {
  --c-button--padding: var(--ks-spacing-inset-s);
}
.wlp-button-group .c-button--large.c-button {
  --c-button--padding: var(--ks-spacing-inset-m);
}
.wlp-button-group .c-button--small.c-button {
  --c-button--padding: var(--ks-spacing-inset-xs);
}
.wlp-button-group--gap-large {
  --wlp-button-group--gap: var(--ks-spacing-inline-s);
}
.wlp-button-group--gap-none {
  --wlp-button-group--gap: 0;
}

.l-container--button-group {
  /* stylelint-disable-next-line property-no-unknown */
  container-name: button-group;
}

.wlp-button-group {
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  gap: var(--wlp-button-group--gap);
  justify-content: flex-start;
  align-items: stretch;
}
.wlp-button-group .c-button {
  flex: 1 1 0%;
}

:root,
[ks-theme],
[ks-inverted] {
  --wlp-bundle-spacing-inset: var(--ks-spacing-inset-l);
  --wlp-bundle-spacing-stack: var(--ks-spacing-stack-m);
  --wlp-bundle-data-spacing-stack: var(--ks-spacing-stack-m);
  --wlp-bundle-item-spacing: var(--ks-spacing-s);
  --wlp-bundle-border-color: var(--ks-border-color-accent);
  --wlp-bundle-color: var(--ks-text-color-interface);
  --wlp-bundle-color-primary: var(--ks-color-primary);
  --wlp-bundle-font: var(--ks-font-interface-m);
  --wlp-bundle-price-font-weight: var(--ks-font-weight-bold);
  --wlp-bundle-label-font: var(--ks-font-interface-m);
  --wlp-bundle-price-font: var(--ks-font-interface-xl);
}
:root .wlp-bundle-price:only-child,
[ks-theme] .wlp-bundle-price:only-child,
[ks-inverted] .wlp-bundle-price:only-child {
  --wlp-bundle-price-font: var(--ks-font-interface-xxl);
}

.wlp-bundle-row {
  padding: 0 var(--wlp-bundle-spacing-inset);
}
.wlp-bundle-row--border {
  border-top: 2px solid var(--wlp-bundle-border-color);
}
.wlp-bundle-row .wlp-bundle-data:first-child .wlp-bundle-data__split {
  border-top: 0;
}
.wlp-bundle-item {
  display: flex;
  gap: var(--wlp-bundle-item-spacing);
}
.wlp-bundle-item--stack {
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.wlp-bundle-item--stack .wlp-bundle-item__title {
  text-align: center;
}
.wlp-bundle-item--stack .wlp-bundle-item__name {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.wlp-bundle-item__label {
  color: var(--wlp-bundle-color);
  font: var(--wlp-bundle-label-font);
}
.wlp-bundle-item__column {
  display: flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
}
.wlp-bundle-item .wlp-bundle-item__title.c-headline {
  max-width: 100%;
}
.wlp-bundle-item .wlp-bundle-item__title.c-headline .c-headline__headline {
  color: var(--wlp-bundle-color);
  font: var(--ks-font-interface-l);
  font-weight: var(--c-headline--font-weight);
}
.wlp-bundle-item__image {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 3em;
  height: 3em;
}
.wlp-bundle-item__image .icon {
  width: 100%;
  height: 100%;
}
.wlp-bundle-item--stack .wlp-bundle-item__image {
  width: 87px;
  height: 87px;
}
.wlp-bundle-item__image img {
  max-height: 100%;
}
.wlp-bundle-item:not(.wlp-bundle-item--stack) .wlp-bundle-price {
  text-align: right;
}
.wlp-bundle-item:not(.wlp-bundle-item--stack) .wlp-bundle-price__amount {
  --wlp-bundle-price-font: var(--ks-font-interface-l);
}
.wlp-bundle-data__split {
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--ks-spacing-stack-xs) var(--ks-spacing-inline-xs);
  border-top: 2px dashed var(--ks-border-color-accent);
}
.wlp-bundle-data span {
  color: var(--wlp-bundle-color);
  font: var(--wlp-bundle-font);
  padding: var(--wlp-bundle-data-spacing-stack) 0;
  align-self: center;
}
.wlp-bundle-data span.wlp-bundle-data__value {
  text-align: right;
  font-weight: var(--ks-font-weight-bold);
}
.wlp-bundle-data span.wlp-bundle-data__additional-value {
  display: block;
  padding-top: 0;
}
.wlp-bundle-price {
  display: flex;
  flex-direction: column;
  gap: var(--ks-spacing-xxs);
  padding: var(--ks-spacing-inset-squish-m);
}
.wlp-bundle-price:first-child {
  padding-left: 0;
}
.wlp-bundle-price:last-child {
  padding-right: 0;
}
.wlp-bundle-price--monthly .wlp-bundle-price__amount {
  color: var(--wlp-bundle-color-primary);
}
.wlp-bundle-price--monthly .wlp-bundle-price__text {
  font-weight: var(--ks-font-weight-semi-bold);
  color: var(--wlp-bundle-color);
}
.wlp-bundle-price__label {
  color: var(--wlp-bundle-color);
  font: var(--wlp-bundle-font);
}
.wlp-bundle-price__amount {
  color: var(--wlp-bundle-color);
  font: var(--wlp-bundle-price-font);
  font-weight: var(--wlp-bundle-price-font-weight);
}
.wlp-bundle .c-divider {
  --c-divider--height: 1px;
}

.wlp-bundle-teaser__head {
  padding-top: var(--wlp-bundle-spacing-inset);
  padding-bottom: var(--wlp-bundle-spacing-stack);
  display: flex;
  flex-direction: column;
  gap: var(--wlp-bundle-spacing-stack);
}
.wlp-bundle-teaser .wlp-bundle-item__image {
  width: 196px;
  height: 196px;
}
.wlp-bundle-teaser__price-wrapper {
  display: flex;
  margin-top: auto;
}
.wlp-bundle-teaser__price-wrapper > * {
  flex: 1 1;
}
.wlp-bundle-teaser__price-wrapper > *:first-child {
  border-right: var(--ks-border-width-default) solid var(--ks-border-color-accent);
  padding-left: 0;
}
.wlp-bundle-teaser__price-wrapper > *:last-child {
  padding-right: 0;
}
.wlp-bundle-teaser__price-wrapper > *:only-child {
  border-right: 0;
}
.wlp-bundle-teaser__price-wrapper > *:only-child span {
  display: flex;
  justify-content: center;
}
.wlp-bundle-teaser button.c-button {
  width: 100%;
  border-radius: 0;
  border: 0;
  border-top: var(--ks-border-width-default) solid var(--wlp-bundle-border-color);
}

:root .wlp-bundle-alternative .wlp-bundle-price,
[ks-theme] .wlp-bundle-alternative .wlp-bundle-price,
[inverted] .wlp-bundle-alternative .wlp-bundle-price {
  --wlp-bundle-price-font: var(--ks-font-interface-xl);
}

.wlp-bundle-alternative.wlp-card {
  height: fit-content;
  position: relative;
}
.wlp-bundle-alternative.wlp-card .wlp-bundle-alternative__head {
  padding: var(--wlp-bundle-spacing-inset) 0;
  display: flex;
  flex-direction: column;
  gap: var(--ks-spacing-stack-m);
}
.wlp-bundle-alternative.wlp-card .wlp-bundle-alternative__row {
  padding: 0 var(--wlp-bundle-spacing-inset);
}
.wlp-bundle-alternative.wlp-card .wlp-bundle-alternative__price-wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.wlp-bundle-alternative.wlp-card .wlp-bundle-alternative__price-wrapper > *:first-child {
  padding-left: 0;
  border-right: var(--ks-border-width-default) solid var(--ks-border-color-accent);
}
.wlp-bundle-alternative.wlp-card .wlp-bundle-alternative__price-wrapper > *:last-child {
  padding-right: 0;
}
.wlp-bundle-alternative.wlp-card .c-button.c-button--ghost {
  width: 100%;
  border-radius: 0;
  border-top: var(--wlp-card-border-width) solid var(--wlp-card-border-color);
}
.wlp-bundle-alternative.wlp-card:hover .c-button.c-button--ghost {
  border-top-color: var(--wlp-card-border-color-hover);
}

:root .wlp-bundle-details .wlp-bundle-price,
[ks-theme] .wlp-bundle-details .wlp-bundle-price,
[inverted] .wlp-bundle-details .wlp-bundle-price {
  --wlp-bundle-price-font: var(--ks-font-interface-xl);
}

.wlp-bundle-details {
  background-color: var(--ks-background-color-default);
  border-radius: var(--ks-border-radius-surface);
  height: fit-content;
  position: relative;
}
.wlp-bundle-details__head {
  padding: var(--wlp-bundle-spacing-stack) 0;
  display: flex;
  flex-direction: column;
  gap: var(--wlp-bundle-spacing-stack);
}
.wlp-bundle-details__content {
  padding: 0 var(--wlp-bundle-spacing-inset);
}
.wlp-bundle-details__price-wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.wlp-bundle-details__price-wrapper .wlp-bundle-price + .wlp-bundle-price {
  border-left: 1px solid var(--ks-border-color-accent);
}
.wlp-bundle-details__price-wrapper > * {
  padding: var(--ks-spacing-inset-squish-m);
}
.wlp-bundle-details__price-wrapper > *:first-child {
  padding-left: 0;
}
.wlp-bundle-details__price-wrapper > *:last-child {
  padding-right: 0;
}
.wlp-bundle-details__coupon {
  position: relative;
}
.wlp-bundle-details__coupon .c-form-field {
  padding: var(--wlp-bundle-spacing-inset) 0;
}
.wlp-bundle-details button.c-button.c-button--ghost {
  width: 100%;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  border-top: 1px solid var(--ks-border-color-accent);
}

.wlp-bundle-summary {
  --wlp-bundle-summary-name--font: var(--ks-font-copy-s);
  --wlp-bundle-summary-data--font: var(--ks-font-copy-xs);
  --wlp-bundle-summary-price-label--font: var(--ks-font-copy-l);
  --wlp-bundle-summary-price-amount--font: var(--ks-font-copy-l);
}

.wlp-bundle-summary-item {
  display: flex;
  flex-direction: column;
  gap: var(--wlp-bundle-spacing-stack);
  --gutter: 0;
}
.wlp-bundle-summary-item__price {
  border-top: var(--ks-border-width-default) solid var(--ks-border-color-accent);
  padding-top: var(--wlp-bundle-spacing-stack);
}

button.c-button.wlp-color-select-button {
  padding: 1rem;
  flex: 0;
  border-radius: var(--ks-border-radius-circle);
  box-shadow: inset var(--ks-background-color-default) 0 0 0 4px;
}
button.c-button.wlp-color-select-button span {
  display: none;
}

:root,
[ks-theme],
[ks-inverted] {
  --wlp-card-background-color: var(--ks-background-color-default);
  --wlp-card-background-color-hover: var(--ks-background-color-default);
  --wlp-card-border: var(--wlp-card-border-color) var(--wlp-card-border-witdth)
    solid;
  --wlp-card-border-width: var(--ks-border-width-emphasized);
  --wlp-card-border-color: var(--ks-border-color-interface-interactive);
  --wlp-card-border-color-hover: var(
    --ks-border-color-interface-interactive-hover
  );
  --wlp-card-border-radius: var(--ks-border-radius-card);
  --wlp-card-box-shadow: none;
  --wlp-card-box-shadow-hover: none;
  --wlp-card-button-background-color: var(--ks-background-color-default);
  --wlp-card-button-background-color-hover: var(--wlp-card-border-color-hover);
  --wlp-card-button-color: var(--ks-text-color-interface-interactive);
  --wlp-card-button-color-hover: var(--ks-color-fg-inverted);
  --wlp-card-button-color-highlighted: var(
    --ks-text-color-interface-inverted-interactive-active
  );
  --wlp-card-button-border-color-highlighted: var(
    --ks-border-color-interface-interactive-active
  );
  --wlp-card-border-color-highlighted: var(
    --ks-border-color-interface-interactive-active
  );
  --wlp-card-border-color-highlighted-hover: var(
    --ks-border-color-interface-interactive-active
  );
}

.l-container--card {
  display: contents;
}

.wlp-card {
  background-color: var(--wlp-card-background-color);
  border: var(--wlp-card-border-width) solid var(--wlp-card-border-color);
  border-radius: var(--wlp-card-border-radius);
  box-shadow: var(--wlp-card-box-shadow);
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  height: auto;
  position: relative;
  cursor: pointer;
  overflow: hidden;
  transition: var(--ks-transition-hover);
  transition-property: border-color;
}
.wlp-card .c-button {
  background-color: var(--wlp-card-button-background-color);
  color: var(--wlp-card-button-color);
  padding-left: var(--wlp-bundle-spacing-inset);
  padding-right: var(--wlp-bundle-spacing-inset);
}
.wlp-card:hover, .wlp-card[aria-pressed=true] {
  border-color: var(--wlp-card-border-color-hover);
  background-color: var(--wlp-card-background-color-hover);
  box-shadow: var(--wlp-card-box-shadow-hover);
}
.wlp-card:hover .c-button,
.wlp-card:hover .c-button:hover, .wlp-card[aria-pressed=true] .c-button,
.wlp-card[aria-pressed=true] .c-button:hover {
  border-color: transparent;
  background-color: var(--wlp-card-button-background-color-hover);
  color: var(--wlp-card-button-color-hover);
}
.wlp-card:hover .c-button:active, .wlp-card[aria-pressed=true] .c-button:active {
  transform: none;
}
.wlp-card--highlighted {
  border-color: var(--wlp-card-border-color-highlighted);
}
.wlp-card--highlighted:hover {
  border-color: var(--wlp-card-border-color-highlighted-hover);
}
.wlp-card--highlighted:hover .c-button,
.wlp-card--highlighted:hover .c-button:hover {
  background-color: var(--wlp-card-button-border-color-highlighted);
  color: var(--wlp-card-button-color-highlighted);
}
.wlp-card--unavailable {
  opacity: 0.5;
  pointer-events: none;
}
.wlp-card > .wlp-bundle-row:last-of-type {
  padding-bottom: var(--wlp-bundle-spacing-stack);
}
.wlp-card .icon:first-child {
  margin-top: 10px;
  margin-left: 10px;
  width: 38px;
  height: 38px;
}

.c-contact__links .icon {
  color: var(--g-link--color);
}

.contract-change .l-container {
  width: 100%;
}
.contract-change .l-container--rich-text {
  container-type: unset;
}
.contract-change__options--with-contract-change {
  flex-direction: column;
}
.contract-change__options--with-contract-change h4 {
  margin-left: 1.5rem;
  margin-top: -6px;
}
.contract-change__options--with-contract-change h4,
.contract-change__options--with-contract-change .wlp-rich-choice-box__description {
  text-align: left;
}

.contract-information .c-collapsible-box__content__item {
  padding: var(--c-collapsible-box_header--padding);
}
.contract-information .contract-information__details,
.contract-information .contract-information__generation-unit {
  display: grid;
  grid-template-columns: 30% auto;
  gap: var(--ks-spacing-inset-squish-m);
  margin-bottom: 1rem;
}
.contract-information__label {
  font-weight: var(--ks-font-weight-bold);
}
.contract-information__value {
  margin: 0;
  text-align: right;
}

:root .c-content-box,
[ks-theme] .c-content-box,
[ks-inverted] .c-content-box {
  --c-content-box_topic--font-xs: var(--ks-font-copy-xs);
  --c-content-box_topic--font-s: var(--ks-font-copy-s);
  --c-content-box_topic--font-m: var(--ks-font-copy-m);
}

.swiper-slide .c-content-box__body {
  margin: auto;
  flex: unset;
}
.swiper-slide .c-content-box__text {
  display: flex;
  gap: var(--ks-spacing-s);
}
.swiper-slide .l-container {
  width: unset;
}

.l-container--content-section {
  /* stylelint-disable-next-line property-no-unknown */
  container-name: content-section;
}

.l-content-section {
  --l-content-section-padding: var(--ks-spacing-inset-l);
  --l-content-section-padding--narrow: var(--ks-spacing-inset-squish-l);
}
@container content-section (min-width: 801px) {
  .l-content-section {
    --l-content-section-padding: var(--ks-spacing-inset-squish-xl);
  }
}

.l-container--content-section {
  /* stylelint-disable-next-line property-no-unknown */
  container-name: content-section;
}

.l-content-section__container {
  background-color: var(--ks-background-color-default);
  border-radius: var(--ks-border-radius-surface);
  height: fit-content;
  padding: var(--l-content-section-padding);
}
.l-content-section--border .l-content-section__container {
  border: var(--ks-border-color-accent) 1px solid;
}
.l-content-section--accent .l-content-section__container {
  background-color: var(--ks-background-color-accent);
}
.l-content-section--shadow .l-content-section__container {
  box-shadow: var(--ks-box-shadow-surface);
}
.l-content-section--spacing-none .l-content-section__container {
  padding: 0;
}
.l-content-section--spacing-narrow .l-content-section__container {
  padding: var(--l-content-section-padding--narrow);
}
.l-content-section--spacing-none .l-content-section__container {
  padding: 0;
}
.l-content-section--sticky {
  height: 100%;
  position: relative;
}
.l-content-section--sticky > .l-content-section__container {
  position: sticky;
  top: var(--ks-spacing-stack-m);
}

.customer-data__information, .customer-data__personal, .customer-data__address, .customer-data__contact {
  display: grid;
  grid-template-columns: 30% auto;
  gap: var(--ks-spacing-inset-squish-m);
  margin-bottom: 1rem;
}
.customer-data__header {
  margin: 0;
}
.customer-data__label {
  font-weight: var(--ks-font-weight-bold);
}
.customer-data__value {
  margin: 0;
  text-align: right;
}

:root .wlp-data-summary {
  --wlp-data-summary-color-primary: var(--ks-text-color-primary);
}

.wlp-data-summary {
  display: flex;
  flex-direction: column;
  gap: var(--ks-spacing-stack-m);
}
.wlp-data-summary .c-button.wlp-data-summary__edit-button {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  margin-left: auto;
  width: fit-content;
  --c-button--font: var(--ks-font-interface-s);
  padding: var(--ks-spacing-inset-squish-s);
}
.wlp-data-summary-entry__label {
  font: var(--ks-font-interface-s);
  color: var(--wlp-data-summary-color-primary);
}

.l-container--dynamic-form {
  /* stylelint-disable-next-line property-no-unknown */
  container-name: dynamic-form;
}

.edl-dynamic-form {
  display: flex;
  flex-direction: column;
  gap: var(--ks-spacing-inline-m);
}
.edl-dynamic-form--layout-30-70 > *:last-child {
  flex: 2.3333333333;
}
.edl-dynamic-form--layout-70-30 > *:first-child {
  flex: 2.3333333333;
}
@container dynamic-form (min-width: 340px) {
  .edl-dynamic-form {
    flex-direction: row;
  }
}
.edl-dynamic-form > * {
  width: unset !important;
  flex: 1;
}

.g-link {
  font: var(--ks-font-interface-m);
}

:root,
[ks-theme],
[ks-inverted] {
  --c-form-field-label--color: var(--ks-text-color-interface);
}
:root .c-form-check,
[ks-theme] .c-form-check,
[ks-inverted] .c-form-check {
  --c-form-check_label--font: var(--ks-font-interface-l);
  --c-form-check_box--border-color: var(
    --ks-border-color-interface-interactive
  );
  --c-form-check_box-hover--border-color: var(
    --ks-border-color-interface-interactive-hover
  );
  --c-form-check_box-focus--border-color: var(
    --ks-border-color-interface-interactive-active
  );
  --c-form-check_box-focus--shadow: 0 0 4px 0;
  --c-form-check_box-checked--background: var(--ks-background-color-primary);
  --c-form-check_box-checked--border-color: var(
    --ks-background-color-primary
  );
  --c-form-check_checkmark--color: var(
    --ks-background-color-primary-inverted
  );
}
:root .c-form-field,
[ks-theme] .c-form-field,
[ks-inverted] .c-form-field {
  --c-form-field--padding: 0.4rem 0.75rem 0.35rem;
  --c-form-field--font: var(--ks-font-interface-l);
  --c-form-field--background: var(var(--ks-color-fg-inverted-alpha-5));
  --c-form-field--border: var(--ks-border-width-default) solid;
  --c-form-field--border-color: var(--ks-border-color-interface-interactive);
  --c-form-field_hover--border-color: var(
    --ks-border-color-interface-interactive-hover
  );
  --c-form-field_focus--border-color: var(
    --ks-border-color-interface-interactive-active
  );
  --c-form-field--color: var(--ks-text-color-interface-interactive);
}

:root .c-form-check__box {
  box-sizing: border-box;
}
:root .c-form-check__label {
  font: var(--c-form-check_label--font);
  font-weight: var(--c-form-check_label--font-weight);
  color: var(--c-form-field-label--color);
}
:root .c-form-field__input {
  padding: var(--c-form-field--padding);
  font: var(--c-form-field--font);
  box-sizing: border-box;
}
:root .c-form-field__input::placeholder {
  color: var(--ks-text-color-interface-visited);
}
:root .c-form-field__label {
  color: var(--c-form-field-label--color);
}
:root .c-form-field__invalid-message,
:root .c-form-check__invalid-message {
  color: var(--ks-color-fg-inverted);
}

:root .c-headline {
  --c-headline--margin-bottom: 0;
}
:root .c-headline h1 + .c-headline__subheadline,
:root .c-headline .c-headline__h1 + .c-headline__subheadline {
  --c-headline_subheadline--font: var(--ks-font-display-m);
}

.l-container--headline {
  /* stylelint-disable-next-line property-no-unknown */
  container-name: headline;
}

:root .l-container--headline,
[ks-theme] .l-container--headline,
[ks-inverted] .l-container--headline {
  flex: 1 1;
}
:root .l-container--headline[min-width~="640"] .c-headline,
[ks-theme] .l-container--headline[min-width~="640"] .c-headline,
[ks-inverted] .l-container--headline[min-width~="640"] .c-headline {
  max-width: 100%;
}
:root .c-headline,
[ks-theme] .c-headline,
[ks-inverted] .c-headline {
  max-width: 100%;
}
:root .c-headline--space-after-small,
[ks-theme] .c-headline--space-after-small,
[ks-inverted] .c-headline--space-after-small {
  padding-bottom: var(--ks-spacing-stack-m);
}
:root .c-headline--space-after-large,
[ks-theme] .c-headline--space-after-large,
[ks-inverted] .c-headline--space-after-large {
  padding-bottom: var(--ks-spacing-stack-l);
}

.wlp-notification {
  --wlp-notification--font: var(--wlp-notification--font-size) /
    var(--wlp-notification--line-height) var(--wlp-notification--font-family);
  --wlp-notification--icon-size: calc(
    var(--wlp-notification--line-height) * var(--wlp-notification--font-size)
  );
  --wlp-notification--padding: var(--ks-spacing-inset-s);
  --wlp-notification-border-width: var(--ks-border-width-default);
  --wlp-notification-border-radius: var(--ks-border-radius-card);
  --wlp-notification--background: var(--ks-background-color-default);
  --wlp-notification--color: var(--ks-text-color-default);
  --wlp-notification--font-family: var(--ks-font-family-interface);
  --wlp-notification--font-size: var(--ks-font-size-interface-l);
  --wlp-notification--line-height: var(--ks-line-height-interface-l);
}

.l-container--notification {
  /* stylelint-disable-next-line property-no-unknown */
  container-name: notification;
}

.wlp-notification {
  display: flex;
  align-items: stretch;
  padding: var(--wlp-notification--padding);
  gap: var(--ks-spacing-xs);
  background-color: var(--ks-background-color-default);
  border: var(--wlp-notification-border-width) solid;
  border-radius: var(--wlp-notification-border-radius);
  flex-direction: row;
}
.wlp-notification__content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--ks-spacing-xs);
}
.wlp-notification__content .c-rich-text {
  font: var(--wlp-notification--font);
  color: var(--wlp-notification--color);
}
.wlp-notification__text-media.text-media--above .text-media__media {
  padding-bottom: var(--ks-spacing-stack-s);
}
.wlp-notification__text-media.text-media--below .text-media__media {
  padding-top: var(--ks-spacing-stack-s);
}
.wlp-notification__text-media.text-media--above > .text-media__gallery, .wlp-notification__text-media.text-media--below > .text-media__gallery {
  padding: 0;
}
.wlp-notification__title {
  font: var(--wlp-notification--font);
  font-weight: var(--ks-font-weight-semi-bold);
  color: var(--wlp-notification--color);
}
.wlp-notification .icon {
  width: var(--wlp-notification--icon-size);
  height: var(--wlp-notification--icon-size);
}
.wlp-notification .l-container {
  container-type: unset;
}
.wlp-notification__close {
  height: fit-content;
}
.wlp-notification__close .wlp-notification__icon.icon {
  color: var(--ks-color-interface);
}
.wlp-notification__close .wlp-notification__icon.icon:hover {
  background-color: var(--ks-background-color-interface-interactive-hover);
}
.wlp-notification--plain {
  background-color: transparent;
  border: 0;
  padding: 0;
}
.wlp-notification--plain .icon {
  color: var(--ks-text-color-default);
}
.wlp-notification--info {
  border-color: var(--ks-color-informative);
}
.wlp-notification--info .icon {
  color: var(--ks-color-informative);
}
.wlp-notification--warning {
  border-color: var(--ks-color-notice);
}
.wlp-notification--warning .icon {
  color: var(--ks-color-notice);
}
.wlp-notification--error {
  border-color: var(--ks-color-negative);
}
.wlp-notification--error .icon {
  color: var(--ks-color-negative);
}

.wlp-progress-bar {
  --wlp-progress-bar-label-margin-top: 0.75em;
  --wlp-progress-bar-label--color: var(--ks-text-color-interface);
  --wlp-progress-bar-label--background-color: transparent;
  --wlp-progress-bar-label--max-width: 190px;
  --wlp-progress-bar-label--color-active: var(--ks-text-color-interface);
  --wlp-progress-bar-label--background-color-active: transparent;
  --wlp-progress-bar-label--color-current: var(--ks-color-fg-inverted);
  --wlp-progress-bar-label--background-color-current: var(
    --ks-color-fg-to-bg-3
  );
  --wlp-progress-bar-label--font: var(--ks-font-interface-l);
  --wlp-progress-bar-label--border-radius: var(--ks-border-radius-control);
  --wlp-progress-bar-label-padding: var(--ks-spacing-inset-squish-m);
  --wlp-progress-bar-icon--color: transparent;
  --wlp-progress-bar-icon--background-color: var(--ks-color-fg-to-bg-7);
  --wlp-progress-bar-icon--color-active: var(--ks-color-fg-inverted);
  --wlp-progress-bar-icon--background-color-active: var(--ks-color-fg-to-bg-3);
  --wlp-progress-bar-icon--color-current: var(
    --wlp-progress-bar-icon--color-active
  );
  --wlp-progress-bar-icon--background-color-current: var(
    --wlp-progress-bar-icon--background-color-active
  );
  --wlp-progress-bar-icon-size: var(--ks-spacing-xxl);
  --wlp-progress-bar-icon--border-radius: var(--ks-border-radius-circle);
}

.l-container--progress-bar {
  /* stylelint-disable-next-line property-no-unknown */
  container-name: progress-bar;
}

.wlp-progress-bar {
  position: relative;
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-start;
}
.wlp-progress-bar__item {
  width: fit-content;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  flex: 1;
}
.wlp-progress-bar__item--active .wlp-progress-bar__label {
  background-color: var(--wlp-progress-bar-label--background-color-active);
  color: var(--wlp-progress-bar-label--color-active);
}
.wlp-progress-bar__item--active .wlp-progress-bar__icon:before, .wlp-progress-bar__item--active .wlp-progress-bar__icon:after {
  background-color: var(--wlp-progress-bar-icon--background-color-active);
}
.wlp-progress-bar__item--active .wlp-progress-bar__icon > .icon {
  background-color: var(--wlp-progress-bar-icon--background-color-active);
  color: var(--wlp-progress-bar-icon--color-active);
  z-index: 1;
}
.wlp-progress-bar__item--current.wlp-progress-bar__item--active .wlp-progress-bar__label {
  background-color: var(--wlp-progress-bar-label--background-color-current);
  color: var(--wlp-progress-bar-label--color-current);
}
.wlp-progress-bar__item--current.wlp-progress-bar__item--active .wlp-progress-bar__icon:before {
  background-color: var(--wlp-progress-bar-icon--background-color-active);
}
.wlp-progress-bar__item--current.wlp-progress-bar__item--active .wlp-progress-bar__icon:after {
  background-color: var(--wlp-progress-bar-icon--background-color);
}
.wlp-progress-bar__item--current.wlp-progress-bar__item--active .wlp-progress-bar__icon > .icon {
  background-color: var(--wlp-progress-bar-icon--background-color-current);
  color: var(--wlp-progress-bar-icon--color-current);
}
.wlp-progress-bar__item:first-of-type .wlp-progress-bar__icon:before {
  content: unset;
}
.wlp-progress-bar__item:last-of-type .wlp-progress-bar__icon:after {
  content: unset;
}
.wlp-progress-bar__icon {
  display: flex;
  justify-content: center;
  position: relative;
  width: 100%;
  z-index: 2;
}
.wlp-progress-bar__icon > .icon {
  width: var(--wlp-progress-bar-icon-size);
  height: var(--wlp-progress-bar-icon-size);
  background-color: var(--wlp-progress-bar-icon--background-color);
  color: var(--wlp-progress-bar-icon--color);
  border-radius: var(--wlp-progress-bar-icon--border-radius);
  padding: 0.5em;
}
.wlp-progress-bar__icon:before, .wlp-progress-bar__icon:after {
  content: "";
  position: absolute;
  background-color: var(--wlp-progress-bar-icon--background-color);
  height: 30%;
  width: 50%;
  top: 35%;
  z-index: 0;
}
.wlp-progress-bar__icon:before {
  left: 0;
}
.wlp-progress-bar__icon:after {
  right: 0;
}
.wlp-progress-bar__label {
  color: var(--wlp-progress-bar-label--color);
  font: var(--wlp-progress-bar-label--font);
  padding: var(--wlp-progress-bar-label-padding);
  position: relative;
  top: 100%;
  margin-top: var(--wlp-progress-bar-label-margin-top);
  border-radius: var(--wlp-progress-bar-label--border-radius);
  width: fit-content;
  max-width: var(--wlp-progress-bar-label--max-width);
  display: none;
  text-align: center;
  z-index: 3;
}
.wlp-progress-bar__label::after {
  background-color: var(--wlp-progress-bar-label--background-color-current);
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%) rotate(45deg);
  border-top-width: 0;
  width: var(--wlp-progress-bar-label-margin-top);
  height: var(--wlp-progress-bar-label-margin-top);
  z-index: -1;
}
.wlp-progress-bar__item--current .wlp-progress-bar__label::after {
  content: "";
}
@container progress-bar (min-width: 800px) {
  .wlp-progress-bar__label {
    display: block;
  }
}

@media print {
  .wlp-progress-bar {
    display: none;
  }
}
.wlp-price-finder__choice {
  --wlp-button-group__col--min-width: 45%;
}

.wlp-price-finder-consumption__select .c-button {
  --c-button--padding: var(--ks-spacing-inset-s);
  --c-button--icon-size: 2em;
}

.l-container--consumption {
  /* stylelint-disable-next-line property-no-unknown */
  container-name: consumption;
}

.wlp-price-finder-consumption {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ks-spacing-m);
  align-items: flex-end;
}
.wlp-price-finder-consumption[disabled] {
  display: none;
}
.wlp-price-finder-consumption__label {
  font: var(--ks-font-interface-s);
}
.wlp-price-finder-consumption .l-container--button-group {
  container-type: unset;
  flex: 1;
}
.wlp-price-finder-consumption .wlp-button-group {
  flex-wrap: nowrap;
}
.wlp-price-finder-consumption .c-button {
  --c-button--padding: 0.25rem !important;
  --c-button--icon-size: calc(
    0.4rem + 0.35rem + calc(var(--ks-line-height-interface-m) * 1rem) -
      calc(var(--c-button--padding) * 2)
  );
}
.wlp-price-finder-consumption .c-form-field {
  flex: 1 0 8rem;
}
.wlp-price-finder-consumption .l-container--dynamic-form {
  width: 100%;
}
.wlp-price-finder-consumption__fields {
  display: flex;
  flex-direction: row;
  width: 100%;
}
.wlp-price-finder-consumption__fields .c-form-field:first-child {
  margin-right: var(--ks-spacing-m);
}
.wlp-price-finder-consumption__fields .c-form-field__label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.l-container--consumption {
  display: contents;
}

.wlp-price-finder {
  --wlp-price-finder-headline--color: var(--g-topic--color);
}

.l-container--price-finder {
  /* stylelint-disable-next-line property-no-unknown */
  container-name: price-finder;
}

.wlp-price-finder {
  width: 100%;
  display: grid;
  gap: var(--ks-spacing-m);
}
.wlp-price-finder--default {
  grid-template-columns: 4fr 1fr 1fr 4fr;
  grid-template-areas: "zip city city city" "street street street house-number" "consumption consumption consumption consumption";
}
@container price-finder (min-width: 350px) {
  .wlp-price-finder--default {
    grid-template-columns: 2fr 1fr 1fr 2fr;
  }
}
@container price-finder (min-width: 450px) {
  .wlp-price-finder--default {
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }
}
.wlp-price-finder--default.wlp-price-finder--with-button {
  grid-template-areas: "zip city city city" "street street street house-number" "consumption consumption consumption consumption" "button button button button";
}
.wlp-price-finder--default.wlp-price-finder--city {
  grid-template-areas: "zip city city city" "consumption consumption consumption consumption";
}
@container price-finder (min-width: 450px) {
  .wlp-price-finder--default.wlp-price-finder--city {
    grid-template-areas: "zip city consumption consumption";
  }
}
.wlp-price-finder--default.wlp-price-finder--city.wlp-price-finder--with-button {
  grid-template-areas: "zip city city city" "consumption consumption consumption consumption" "button button button button";
}
@container price-finder (min-width: 450px) {
  .wlp-price-finder--default.wlp-price-finder--city.wlp-price-finder--with-button {
    grid-template-columns: 1fr 1fr 1fr 1fr auto;
    grid-template-areas: "zip city consumption consumption button ";
  }
}
.wlp-price-finder--default.wlp-price-finder--zip {
  grid-template-areas: "zip zip zip zip" "consumption consumption consumption consumption";
}
@container price-finder (min-width: 450px) {
  .wlp-price-finder--default.wlp-price-finder--zip {
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-areas: "zip consumption consumption";
  }
}
.wlp-price-finder--default.wlp-price-finder--zip.wlp-price-finder--with-button {
  grid-template-columns: 1fr;
  grid-template-areas: "zip" "consumption" "button";
}
@container price-finder (min-width: 650px) {
  .wlp-price-finder--default.wlp-price-finder--zip.wlp-price-finder--with-button {
    grid-template-columns: 1fr 2fr auto;
    grid-template-areas: "zip consumption button";
  }
}
.wlp-price-finder--condensed {
  grid-template-columns: 2fr 1fr 1fr 2fr;
  grid-template-areas: "icon . . ." "zip city city city" "street street street house-number" "consumption consumption consumption consumption";
  align-items: flex-end;
}
@container price-finder (min-width: 640px) {
  .wlp-price-finder--condensed {
    grid-template-columns: 3em 1fr 1fr 1fr 2fr;
    grid-template-areas: "icon zip city city consumption" ". street street house-number .";
    position: relative;
    margin-bottom: calc(var(--ks-line-height-interface-s) * 1rem);
  }
  .wlp-price-finder--condensed .c-form-field__invalid-message {
    position: absolute;
    bottom: 0;
    transform: translateY(100%);
  }
  .wlp-price-finder--condensed .wlp-price-finder__icon.icon {
    padding-bottom: var(--ks-border-width-emphasized);
  }
}
.wlp-price-finder--condensed.wlp-price-finder--with-button {
  grid-template-areas: "icon . . ." "zip city city city" "street street street house-number" "consumption consumption consumption consumption" "button button button button";
}
@container price-finder (min-width: 640px) {
  .wlp-price-finder--condensed.wlp-price-finder--with-button {
    grid-template-areas: "icon zip city city consumption" ". street street house-number button";
  }
}
.wlp-price-finder--condensed.wlp-price-finder--city {
  grid-template-columns: 2fr 1fr 1fr 2fr;
  grid-template-areas: "icon . . ." "zip zip city city" "consumption consumption consumption consumption";
}
@container price-finder (min-width: 850px) {
  .wlp-price-finder--condensed.wlp-price-finder--city {
    grid-template-columns: 3em 1fr 1fr 1fr 2fr;
    grid-template-areas: "icon zip city city consumption";
  }
}
.wlp-price-finder--condensed.wlp-price-finder--city.wlp-price-finder--with-button {
  grid-template-areas: "icon . . ." "zip zip city city" "consumption consumption consumption consumption" "button button button button";
}
@container price-finder (min-width: 850px) {
  .wlp-price-finder--condensed.wlp-price-finder--city.wlp-price-finder--with-button {
    grid-template-columns: 3em 1fr 1fr 1fr 2fr auto;
    grid-template-areas: "icon zip city city consumption button";
  }
}
.wlp-price-finder--condensed.wlp-price-finder--zip {
  grid-template-columns: 1fr;
  grid-template-areas: "icon" "zip" "consumption";
}
@container price-finder (min-width: 420px) {
  .wlp-price-finder--condensed.wlp-price-finder--zip {
    grid-template-columns: 3em 1fr 1fr;
    grid-template-areas: "icon zip consumption";
  }
}
.wlp-price-finder--condensed.wlp-price-finder--zip.wlp-price-finder--with-button {
  grid-template-areas: "icon" "zip" "consumption" "button";
}
@container price-finder (min-width: 420px) {
  .wlp-price-finder--condensed.wlp-price-finder--zip.wlp-price-finder--with-button {
    grid-template-columns: 3em 1fr 1fr auto;
    grid-template-areas: "icon zip consumption button";
  }
}
.wlp-price-finder__icon {
  grid-area: icon;
}
.wlp-price-finder__icon.icon {
  color: var(--ks-text-color-interface);
  height: calc(var(--ks-line-height-interface-l) * 1rem + 12px);
}
.wlp-price-finder__with-button {
  grid-area: button;
  white-space: nowrap;
  align-self: end;
  text-align: right;
}
.wlp-price-finder__zip {
  grid-area: zip;
}
.wlp-price-finder__city {
  grid-area: city;
}
.wlp-price-finder__street {
  grid-area: street;
}
.wlp-price-finder__house-number {
  grid-area: house-number;
}
.wlp-price-finder__consumption {
  grid-area: consumption;
}
.wlp-price-finder .c-form-field {
  position: relative;
}
.wlp-price-finder__choice {
  border: 1px solid var(--ks-border-color-interface-interactive);
  border-width: 0 0 1px;
  margin-bottom: var(--ks-spacing-stack-m);
}
.wlp-price-finder__choice .c-button {
  --c-button--transform-active: none;
  padding: var(--ks-spacing-stack-s) var(--ks-spacing-stack-l);
  flex: 0 0 auto;
  border-width: 0 0 1px;
  border-radius: 0;
  box-shadow: none !important;
  position: relative;
  top: 1px;
}

.wlp-product--availability {
  display: flex;
  align-items: center;
  gap: var(--ks-spacing-inline-s);
}
.wlp-product--availability .l-container--rich-text {
  container-type: normal;
}
.wlp-product--availability img {
  height: 100%;
  width: auto;
  max-height: 4rem;
  max-width: 4rem;
}
@media (min-width: 40em) {
  .wlp-product--availability img {
    max-height: 4.5rem;
    max-width: 4.5rem;
  }
}

.edl-purchase-choice-item {
  border: 1px solid var(--ks-border-color-accent);
}

.wlp-rich-choice {
  --wlp-rich-choice-description-font: var(--ks-font-interface-m);
  --wlp-rich-choice-description-color: var(--ks-text-color-interface);
  --wlp-rich-choice-description-color-hover: var(
    --ks-text-color-interface-interactive-hover
  );
  --wlp-rich-choice-description-color-selected: var(--ks-text-color-interface);
  --wlp-rich-choice-topic-color: var(--ks-color-fg);
  --wlp-rich-choice-topic-font: var(--ks-font-interface-xl);
  --wlp-rich-choice-topic-color-hover: var(--ks-color-fg);
  --wlp-rich-choice-topic-color-selected: var(--ks-color-fg);
  --wlp-rich-choice-border-radius: var(--ks-border-radius-card);
  --wlp-rich-choice-border-width: var(--ks-border-width-default);
  --wlp-rich-choice-border-color: var(--ks-border-color-interface-interactive);
  --wlp-rich-choice-border-color-hover: var(
    --ks-border-color-interface-interactive-hover
  );
  --wlp-rich-choice-border-color-selected: var(
    --ks-border-color-interface-interactive-selected
  );
  --wlp-rich-choice-icon-color-hover: var(
    --ks-text-color-interface-interactive-hover
  );
  --wlp-rich-choice-icon-color-selected: var(
    --ks-border-color-interface-interactive-selected
  );
  --wlp-rich-choice-spacing-inset: var(--ks-spacing-l-base);
  --wlp-rich-choice-box-icon-size: 5em;
}
.wlp-rich-choice.wlp-rich-choice-box {
  --wlp-rich-choice-topic-color-hover: var(
    --wlp-rich-choice-icon-color-hover
  );
  --wlp-rich-choice-topic-color-selected: var(
    --wlp-rich-choice-icon-color-selected
  );
}

.wlp-rich-choice {
  height: 100%;
  border: solid var(--wlp-rich-choice-border-width) var(--wlp-rich-choice-border-color);
  border-radius: var(--wlp-rich-choice-border-radius);
}
.wlp-rich-choice:hover {
  border-color: var(--wlp-rich-choice-border-color-hover);
}
.wlp-rich-choice:hover .wlp-rich-choice--topic .c-headline__headline {
  color: var(--wlp-rich-choice-topic-color-hover);
}
.wlp-rich-choice:hover .icon.wlp-rich-choice-box--icon {
  color: var(--wlp-rich-choice-icon-color-hover);
}
.wlp-rich-choice:hover .c-form-check .c-form-check__box {
  border-color: var(--c-form-check_box-hover--border-color);
}
.wlp-rich-choice--checked.wlp-rich-choice {
  border-color: var(--wlp-rich-choice-border-color-selected);
}
.wlp-rich-choice--checked.wlp-rich-choice .wlp-rich-choice--topic.c-headline .c-headline__headline {
  color: var(--wlp-rich-choice-topic-color-selected);
}
.wlp-rich-choice--checked.wlp-rich-choice .icon.wlp-rich-choice-box--icon {
  color: var(--wlp-rich-choice-icon-color-selected);
}
.wlp-rich-choice--checked.wlp-rich-choice .c-form-check .c-form-check__box {
  border-color: var(--c-form-check_box-checked--border-color);
}
.wlp-rich-choice--topic.c-headline .c-headline__headline {
  font: var(--wlp-rich-choice-topic-font);
  font-weight: var(--c-headline--font-weight);
  color: var(--wlp-rich-choice-topic-color);
}
.wlp-rich-choice .c-rich-text {
  --c-rich-text--color: var(--wlp-rich-choice-description-color);
  font: var(--wlp-rich-choice-description-font);
}
.wlp-rich-choice .c-form-check {
  --c-form-check_box-hover--border-color: var(
    --wlp-rich-choice-border-color-hover
  );
  cursor: pointer;
  display: block;
  padding: var(--wlp-rich-choice-spacing-inset);
}
.wlp-rich-choice .c-form-check__label {
  margin-left: 0;
}
.wlp-rich-choice .c-form-check__box {
  margin-top: 0;
}

.wlp-rich-choice-box--icon.icon {
  color: var(--wlp-rich-choice-color);
  height: var(--wlp-rich-choice-box-icon-size);
  width: var(--wlp-rich-choice-box-icon-size);
}
.wlp-rich-choice-box__topic .c-headline__headline {
  color: var(--wlp-rich-choice-color);
}
.wlp-rich-choice-box__content {
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: var(--ks-spacing-stack-xs);
}
.wlp-rich-choice-box__description {
  text-align: center;
}
.wlp-rich-choice-box .c-form-check__box {
  position: absolute;
}
.wlp-rich-choice-box .c-form-check__label {
  flex: 1;
}

.wlp-rich-choice-accordion {
  --wlp-rich-choice-accordion-icon-size: 3rem;
  --wlp-rich-choice-accordion-gap: var(--ks-spacing-inline-s);
}

.wlp-rich-choice-accordion__head {
  display: block;
}
.wlp-rich-choice-accordion__head .c-form-check__field {
  align-items: center;
  gap: var(--wlp-rich-choice-accordion-gap);
}
.wlp-rich-choice-accordion__head .c-form-check__label {
  display: flex;
  gap: var(--wlp-rich-choice-accordion-gap);
  align-items: center;
}
.wlp-rich-choice-accordion__head .c-form-check__field {
  pointer-events: none;
}
.wlp-rich-choice-accordion__content {
  display: flex;
  flex-direction: column;
  gap: var(--ks-spacing-stack-m);
  padding: var(--wlp-rich-choice-spacing-inset);
  padding-top: 0;
}
.wlp-rich-choice-accordion__legal {
  --c-rich-text--font: var(--ks-font-copy-s);
}
.wlp-rich-choice-accordion__image {
  max-width: var(--wlp-rich-choice-accordion-icon-size);
}
.wlp-rich-choice-accordion__topic.c-headline {
  margin-bottom: 0;
}
.wlp-rich-choice-accordion summary::-webkit-details-marker {
  display: none;
}

:root,
[ks-inverted],
[ks-theme] {
  --l-section--content-width-wide: 80rem !important;
  --l-section--content-padding: var(--ks-spacing-m);
}

:root .l-section--highlight,
[ks-theme] .l-section--highlight,
[ks-inverted] .l-section--highlight {
  --l-section--background: var(--ks-background-color-highlight);
}
:root .l-section--space-before-negative,
[ks-theme] .l-section--space-before-negative,
[ks-inverted] .l-section--space-before-negative {
  padding-top: 0;
}
:root .l-section--space-before-negative .l-section__container,
[ks-theme] .l-section--space-before-negative .l-section__container,
[ks-inverted] .l-section--space-before-negative .l-section__container {
  margin-top: calc(var(--l-section--space) * -1);
  z-index: 2;
  position: relative;
}

.l-container--teaser-box {
  /* stylelint-disable-next-line property-no-unknown */
  container-name: teaser-box;
}

:root .c-teaser-box {
  --c-teaser--background: var(--ks-color-fg-alpha-9);
  --c-teaser--border: var(--ks-border-width-default) solid
    var(--ks-color-fg-alpha-9);
}
:root .c-teaser-box .c-teaser__topic {
  --g-topic--font: var(--ks-font-display-m);
}
@container teaser-box (min-width: 400px) {
  :root .c-teaser-box .c-teaser__topic {
    --g-topic--font: var(--ks-font-display-l);
  }
}

:root [ks-theme=mobile-spacing] {
  --ks-spacing-xxs-bp-factor: 1;
  --ks-spacing-xs-bp-factor: 1;
  --ks-spacing-s-bp-factor: 1;
  --ks-spacing-m-bp-factor: 1;
  --ks-spacing-l-bp-factor: 1;
  --ks-spacing-xl-bp-factor: 1;
  --ks-spacing-xxl-bp-factor: 1;
}

:root [ks-theme=smaller-display-font-sizes] {
  --ks-font-size-display-xxs-base: 0.625rem;
  --ks-font-size-display-xs-base: 0.75rem;
  --ks-font-size-display-s-base: 0.875rem;
  --ks-font-size-display-m-base: 1rem;
  --ks-font-size-display-l-base: 1.125rem;
  --ks-font-size-display-xl-base: 1.375rem;
  --ks-font-size-display-xxl-base: 2rem;
  --ks-font-size-display-xxs: var(--ks-font-size-display-xxs-base);
  --ks-font-size-display-xs: var(--ks-font-size-display-xs-base);
  --ks-font-size-display-s: var(--ks-font-size-display-s-base);
  --ks-font-size-display-m: var(--ks-font-size-display-m-base);
  --ks-font-size-display-l: var(--ks-font-size-display-l-base);
  --ks-font-size-display-xl: var(--ks-font-size-display-xl-base);
  --ks-font-size-display-xxl: var(--ks-font-size-display-xxl-base);
}

:root [ks-theme=order] {
  --ks-font-size-display-xxs-base: 0.625rem;
  --ks-font-size-display-xs-base: 0.75rem;
  --ks-font-size-display-s-base: 0.875rem;
  --ks-font-size-display-m-base: 1rem;
  --ks-font-size-display-l-base: 1.125rem;
  --ks-font-size-display-xl-base: 1.375rem;
  --ks-font-size-display-xxl-base: 2rem;
  --ks-font-size-display-xxs: var(--ks-font-size-display-xxs-base);
  --ks-font-size-display-xs: var(--ks-font-size-display-xs-base);
  --ks-font-size-display-s: var(--ks-font-size-display-s-base);
  --ks-font-size-display-m: var(--ks-font-size-display-m-base);
  --ks-font-size-display-l: var(--ks-font-size-display-l-base);
  --ks-font-size-display-xl: var(--ks-font-size-display-xl-base);
  --ks-font-size-display-xxl: var(--ks-font-size-display-xxl-base);
}
:root [ks-theme=order] h1.c-headline__headline:not(.c-visual__box h1.c-headline__headline) {
  --c-headline--color: var(--ks-text-color-primary);
}

[ks-theme=interface] {
  --ks-spacing-xxs-bp-factor: 1;
  --ks-spacing-xs-bp-factor: 1;
  --ks-spacing-s-bp-factor: 1;
  --ks-spacing-m-bp-factor: 1;
  --ks-spacing-l-bp-factor: 1;
  --ks-spacing-xl-bp-factor: 1;
  --ks-spacing-xxl-bp-factor: 1;
}

:root,
[ks-theme],
[ks-inverted] {
  --ks-font-copy-xxs-base: var(--ks-font-size-copy-xxs-base) /
    var(--ks-line-height-copy-xxs) var(--ks-font-family-copy);
  --ks-font-copy-xs-base: var(--ks-font-size-copy-xs-base) /
    var(--ks-line-height-copy-xs) var(--ks-font-family-copy);
  --ks-font-copy-s-base: var(--ks-font-size-copy-s-base) /
    var(--ks-line-height-copy-s) var(--ks-font-family-copy);
  --ks-font-copy-m-base: var(--ks-font-size-copy-m-base) /
    var(--ks-line-height-copy-m) var(--ks-font-family-copy);
  --ks-font-copy-l-base: var(--ks-font-size-copy-l-base) /
    var(--ks-line-height-copy-l) var(--ks-font-family-copy);
  --ks-font-copy-xl-base: var(--ks-font-size-copy-xl-base) /
    var(--ks-line-height-copy-xl) var(--ks-font-family-copy);
  --ks-font-copy-xxl-base: var(--ks-font-size-copy-xxl-base) /
    var(--ks-line-height-copy-xxl) var(--ks-font-family-copy);
  --ks-font-interface-xxs-base: var(--ks-font-size-interface-xxs-base) /
    var(--ks-line-height-interface-xxs) var(--ks-font-family-interface);
  --ks-font-interface-xs-base: var(--ks-font-size-interface-xs-base) /
    var(--ks-line-height-interface-xs) var(--ks-font-family-interface);
  --ks-font-interface-s-base: var(--ks-font-size-interface-s-base) /
    var(--ks-line-height-interface-s) var(--ks-font-family-interface);
  --ks-font-interface-m-base: var(--ks-font-size-interface-m-base) /
    var(--ks-line-height-interface-m) var(--ks-font-family-interface);
  --ks-font-interface-l-base: var(--ks-font-size-interface-l-base) /
    var(--ks-line-height-interface-l) var(--ks-font-family-interface);
  --ks-font-interface-xl-base: var(--ks-font-size-interface-xl-base) /
    var(--ks-line-height-interface-xl) var(--ks-font-family-interface);
  --ks-font-interface-xxl-base: var(--ks-font-size-interface-xxl-base) /
    var(--ks-line-height-interface-xxl) var(--ks-font-family-interface);
  --ks-font-display-xxs-base: var(--ks-font-size-display-xxs-base) /
    var(--ks-line-height-display-xxs) var(--ks-font-family-display);
  --ks-font-display-xs-base: var(--ks-font-size-display-xs-base) /
    var(--ks-line-height-display-xs) var(--ks-font-family-display);
  --ks-font-display-s-base: var(--ks-font-size-display-s-base) /
    var(--ks-line-height-display-s) var(--ks-font-family-display);
  --ks-font-display-m-base: var(--ks-font-size-display-m-base) /
    var(--ks-line-height-display-m) var(--ks-font-family-display);
  --ks-font-display-l-base: var(--ks-font-size-display-l-base) /
    var(--ks-line-height-display-l) var(--ks-font-family-display);
  --ks-font-display-xl-base: var(--ks-font-size-display-xl-base) /
    var(--ks-line-height-display-xl) var(--ks-font-family-display);
  --ks-font-display-xxl-base: var(--ks-font-size-display-xxl-base) /
    var(--ks-line-height-display-xxl) var(--ks-font-family-display);
}

:root,
[ks-inverted],
[ks-theme] {
  --ks-spacing-inset-squish-xs-base: var(--ks-spacing-xs-base)
    var(--ks-spacing-s-base);
  --ks-spacing-inset-squish-s-base: var(--ks-spacing-s-base)
    var(--ks-spacing-m-base);
  --ks-spacing-inset-squish-m-base: var(--ks-spacing-m-base)
    var(--ks-spacing-l-base);
  --ks-spacing-inset-squish-l-base: var(--ks-spacing-l-base)
    var(--ks-spacing-xl-base);
  --ks-spacing-inset-squish-xl-base: var(--ks-spacing-xl-base)
    var(--ks-spacing-xxl-base);
  --ks-spacing-inset-stretch-xs-base: var(--ks-spacing-s-base)
    var(--ks-spacing-xs-base);
  --ks-spacing-inset-stretch-s-base: var(--ks-spacing-m-base)
    var(--ks-spacing-s-base);
  --ks-spacing-inset-stretch-m-base: var(--ks-spacing-l-base)
    var(--ks-spacing-m-base);
  --ks-spacing-inset-stretch-l-base: var(--ks-spacing-xl-base)
    var(--ks-spacing-l-base);
  --ks-spacing-inset-stretch-xl-base: var(--ks-spacing-xxl-base)
    var(--ks-spacing-xl-base);
  --ks-spacing-stack-xs-base: var(--ks-spacing-xs-base);
  --ks-spacing-stack-s-base: var(--ks-spacing-s-base);
  --ks-spacing-stack-m-base: var(--ks-spacing-s-base);
  --ks-spacing-stack-l-base: var(--ks-spacing-l-base);
  --ks-spacing-stack-xl-base: var(--ks-spacing-xl-base);
  --ks-spacing-inline-xs-base: var(--ks-spacing-xs-base);
  --ks-spacing-inline-s-base: var(--ks-spacing-s-base);
  --ks-spacing-inline-m-base: var(--ks-spacing-s-base);
  --ks-spacing-inline-l-base: var(--ks-spacing-l-base);
  --ks-spacing-inline-xl-base: var(--ks-spacing-xl-base);
}

:root {
  --wlp-icon-background: var(--ks-color-primary);
}

.l-container--split-chart {
  /* stylelint-disable-next-line property-no-unknown */
  container-name: split-chart;
}

:root {
  --wlp-icon-background: linear-gradient(90deg, #30a6df 0%, #6ed232 100%);
}

.wlp-graphic__icon {
  max-width: 160px;
  max-height: 160px;
}
.wlp-graphic--rotate .wlp-graphic__icon {
  -webkit-animation: spin 4s linear infinite;
  -moz-animation: spin 4s linear infinite;
  animation: spin 4s linear infinite;
}
@-moz-keyframes spin {
  100% {
    -moz-transform: rotate(360deg);
  }
}
@-webkit-keyframes spin {
  100% {
    -webkit-transform: rotate(360deg);
  }
}
@keyframes spin {
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

:root .c-storytelling,
[ks-theme] .c-storytelling,
[ks-inverted] .c-storytelling {
  --c-storytelling--horizontal-padding: 0;
  --c-storytelling--vertical-padding: 0;
  gap: var(--ks-spacing-stack-m);
}
:root .l-container--storytelling[min-width~="640"] .c-storytelling,
[ks-theme] .l-container--storytelling[min-width~="640"] .c-storytelling,
[ks-inverted] .l-container--storytelling[min-width~="640"] .c-storytelling {
  --c-storytelling--horizontal-padding: var(--ks-spacing-l);
  --c-storytelling--vertical-padding: var(--ks-spacing-xl);
  gap: 0;
}

.l-container.l-container--storytelling .c-storytelling--product.c-storytelling {
  gap: var(--ks-spacing-m);
}
.l-container.l-container--storytelling .c-storytelling--product.c-storytelling > .c-storytelling__box {
  padding: 0;
}

.l-container--split-chart {
  /* stylelint-disable-next-line property-no-unknown */
  container-name: split-chart;
}

.l-content-section--border .l-container--split-chart:first-child .l-split-chart--container, .l-content-section--accent .l-container--split-chart:first-child .l-split-chart--container {
  border-top: 0;
}

.l-split-chart {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: stretch;
  box-sizing: border-box;
  flex-direction: column;
}
@container split-chart (min-width: 900px) {
  .l-split-chart {
    flex-direction: row;
  }
}
.l-split-chart--container {
  border-top: 1px solid var(--ks-border-color-accent);
  padding: var(--ks-spacing-inset-l) 0;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1 1 0px;
  margin: 0;
}
@container split-chart (min-width: 900px) {
  .l-split-chart--container {
    min-width: 0;
  }
  .l-split-chart--container .l-split-chart--wrapper::after {
    content: "";
    top: 0;
    position: absolute;
    right: 0;
    height: 100%;
    width: 1px;
    background-color: var(--ks-border-color-accent);
  }
  .l-split-chart--container:last-child .l-split-chart--wrapper::after {
    content: unset;
  }
}
.l-split-chart--container .l-container--data-summary {
  transform: translateY(calc(var(--ks-spacing-inset-l) * -1));
  margin-bottom: calc(var(--ks-spacing-inset-l) * -1);
}
.l-split-chart--wrapper {
  position: relative;
  padding: 0 var(--ks-spacing-inset-l);
  height: 100%;
}

.l-container--split-section {
  /* stylelint-disable-next-line property-no-unknown */
  container-name: split-section;
}

.l-split-section {
  display: flex;
  gap: var(--ks-spacing-inline-m);
  flex-direction: column;
}
.l-split-section--mobile-reversed {
  flex-direction: column-reverse;
}
.l-split-section--gutter-large {
  gap: var(--ks-spacing-xxl);
}
.l-split-section--gutter-none {
  gap: 0;
}
@container split-section (min-width: 861px) {
  .l-split-section {
    display: grid;
    grid-template-columns: 6.6fr 3.4fr;
    flex-direction: row;
  }
}

:root .c-visual .c-visual__box {
  --c-visual_box--color: var(--ks-text-color-default);
  --c-visual_box--background: var(--ks-color-fg-inverted-alpha-1);
}

.wlp-energy-product-details {
  font: var(--ks-font-interface-m);
  color: #404040;
}
.wlp-energy-product-details ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.wlp-energy-product-details ul .icon {
  width: 1.5em;
  height: 1.5em;
  margin-right: var(--ks-spacing-inline-s);
}
.wlp-energy-product-details__section {
  padding: var(--ks-spacing-stack-l) 0 !important;
}
.wlp-energy-product-details__section--accent {
  background-color: var(--ks-background-color-accent);
}
.wlp-energy-product-details__reasons p {
  margin: 0 0 var(--ks-spacing-stack-m);
}
.wlp-energy-product-details__usp {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--ks-spacing-m);
}
.wlp-energy-product-details__usp-item {
  flex-grow: 1;
  flex-basis: calc((45rem - 100%) * 999);
  display: flex;
}
.wlp-energy-product-details__usp-item .icon {
  color: var(--ks-text-color-primary);
}
.wlp-energy-product-details__features {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
}
.wlp-energy-product-details__features-label {
  flex: 1 0 auto;
  padding: 0 var(--ks-spacing-inline-m) 0 0;
  margin: 0 0 var(--ks-spacing-stack-s);
  width: 50%;
}
.wlp-energy-product-details__features-value {
  flex: 1 1 50%;
  text-align: right;
  padding: 0;
  margin: 0 0 var(--ks-spacing-stack-s);
  font-weight: bold;
}
.wlp-energy-product-details__document-link {
  display: inline-block;
  margin: 0 0 var(--ks-spacing-stack-s);
}

.wlp-energy-prices {
  --wlp-energy-prices--primary-color: var(--ks-color-secondary);
  --wlp-energy-prices--font: var(--ks-font-interface-m);
  --wlp-energy-prices--font-total: var(--ks-font-interface-xl);
  --wlp-energy-prices--font-weight-total: var(--ks-font-weight-bold);
  width: 100%;
  border-collapse: collapse;
}
.wlp-energy-prices th {
  flex: 1;
  vertical-align: baseline;
  font-weight: var(--ks-font-weight-regular);
  text-align: left;
}
.wlp-energy-prices td {
  vertical-align: baseline;
  text-align: right;
  white-space: nowrap;
}
.wlp-energy-prices td:only-child {
  flex: 1;
}
.wlp-energy-prices__row {
  position: relative;
  border-bottom: 1px solid var(--ks-border-color-accent);
  display: flex;
  padding: calc(var(--ks-spacing-stack-m) + 0.5rem) 0;
}
.wlp-energy-prices__row.working-price__ht {
  border-bottom: 0;
  padding: calc(var(--ks-spacing-stack-m) + 0.5rem) 0 0 0;
}
.wlp-energy-prices__row.working-price__nt {
  padding: calc(var(--ks-spacing-stack-xs) + 0.5rem) 0 calc(var(--ks-spacing-stack-m) + 0.5rem);
  border-bottom: 1px solid var(--ks-border-color-accent);
}
.wlp-energy-prices__row:first-of-type {
  padding-top: 0.5rem;
}
.wlp-energy-prices__row:last-of-type {
  padding-top: var(--ks-spacing-stack-m);
  padding-bottom: 0;
  border-bottom: 0;
}
.wlp-energy-prices__icon-plus.icon {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translate(-50%, 50%);
  border: 2px solid var(--ks-text-color-interface);
  border-radius: 50%;
  height: 1.3rem;
  width: 1.3rem;
}
.wlp-energy-prices__total-monthly {
  color: var(--wlp-energy-prices--primary-color);
  font: var(--wlp-energy-prices--font-total);
  font-weight: var(--wlp-energy-prices--font-weight-total);
}
.wlp-energy-prices__total-yearly {
  margin-top: var(--ks-spacing-stack-s);
  color: var(--wlp-energy-prices--primary-color);
  font: var(--ks-font-interface-xs);
}

.l-container--wlp-energy-product {
  /* stylelint-disable-next-line property-no-unknown */
  container-name: wlp-energy-product;
}

.wlp-energy-product {
  --wlp-energy-product--primary-color: var(--ks-color-secondary);
  --wlp-energy-product--font: var(--ks-font-interface-m);
  --wlp-energy-product--font-total: var(--ks-font-interface-l);
  border: 1px solid var(--ks-border-color-primary);
  font: var(--wlp-energy-product--font);
}
@container wlp-energy-product (min-width: 950px) {
  .wlp-energy-product {
    --wlp-energy-product--font: var(--ks-font-interface-l);
  }
}
.wlp-energy-product .c-rich-text {
  --c-rich-text--font: var(--wlp-energy-product--font);
}
.wlp-energy-product__prices {
  padding: var(--ks-spacing-stack-s);
  background-color: var(--ks-background-color-accent);
}
.wlp-energy-product__prices h2 {
  margin-top: 0;
}
.wlp-energy-product__head {
  display: flex;
  flex-direction: column;
  text-align: left;
  padding: var(--ks-spacing-stack-l) var(--ks-spacing-stack-l) var(--ks-spacing-stack-m) var(--ks-spacing-stack-l);
}
@container wlp-energy-product (min-width: 600px) {
  .wlp-energy-product__head {
    border-bottom: 1px solid #f0f2f5;
    flex-direction: row;
  }
}
.wlp-energy-product__head .wlp-energy-product__image {
  display: block;
  width: 55px;
  height: 55px;
  margin-right: var(--ks-spacing-stack-s);
}
@container wlp-energy-product (min-width: 950px) {
  .wlp-energy-product__head .wlp-energy-product__image {
    display: none;
  }
}
.wlp-energy-product__content {
  display: grid;
  grid-template-columns: 1fr;
}
@container wlp-energy-product (min-width: 600px) {
  .wlp-energy-product__content {
    grid-template-columns: 1fr 1fr;
  }
}
@container wlp-energy-product (min-width: 950px) {
  .wlp-energy-product__content {
    grid-template-columns: repeat(3, 1fr);
  }
}
.wlp-energy-product__contract-info {
  padding: 0 var(--ks-spacing-stack-l) var(--ks-spacing-stack-m);
}
@container wlp-energy-product (min-width: 600px) {
  .wlp-energy-product__contract-info {
    grid-column: 1;
    padding: 10px var(--ks-spacing-stack-l);
    margin-bottom: 0;
  }
}
.wlp-energy-product__contract-info--headline {
  font: var(--ks-font-copy-m);
  font-weight: var(--ks-font-weight-bold);
}
.wlp-energy-product__contract-info--rich-text {
  font: var(--ks-font-interface-s) !important;
  padding: 0 0 var(--c-collapsible-box_content--padding);
}
.wlp-energy-product__heat-pump-info {
  padding: var(--ks-spacing-stack-l);
}
@container wlp-energy-product (min-width: 600px) {
  .wlp-energy-product__heat-pump-info {
    grid-column: 1;
    padding: 10px var(--ks-spacing-stack-l) var(--ks-spacing-stack-l);
    margin-bottom: 0;
  }
}
.wlp-energy-product__contract-info--collapsible, .wlp-energy-product__heat-pump-info--collapsible {
  padding: 0 var(--ks-spacing-stack-l);
}
@container wlp-energy-product (min-width: 950px) {
  .wlp-energy-product__heat-pump-info {
    grid-column: 2;
  }
}
.wlp-energy-product__contract-info--collapsible .c-collapsible-box details {
  border-bottom: none;
}
.wlp-energy-product__contract-info {
  display: flex;
  flex-direction: column;
}
.wlp-energy-product__contract-info .wlp-energy-product__info {
  flex-grow: 1;
}
.wlp-energy-product__contract-info .wlp-energy-product__image {
  display: none;
}
.wlp-energy-product__contract-info .wlp-energy-product__image img {
  max-width: unset;
}
@container wlp-energy-product (min-width: 950px) {
  .wlp-energy-product__contract-info .wlp-energy-product__image {
    display: flex;
    margin: 15px 15px 0 0;
  }
}
@container wlp-energy-product (min-width: 950px) {
  .wlp-energy-product__contract-info {
    flex-direction: row;
    grid-column: 1;
  }
}
.wlp-energy-product__image {
  width: 75px;
  height: 75px;
}
.wlp-energy-product__title {
  line-height: 24px;
  font-weight: 700;
  color: var(--ks-text-color-primary);
  display: inline-block;
  padding: 5px var(--ks-spacing-stack-l);
  border-radius: var(--ks-spacing-stack-l);
  background-color: var(--ks-background-color-clear-interactive-hover);
  margin-bottom: var(--ks-spacing-stack-l);
}
.wlp-energy-product__headline {
  line-height: 32px;
  font-weight: 700;
  color: #404040;
  display: block;
  font-size: var(--ks-font-size-display-m);
  font-weight: var(--ks-font-weight-semi-bold);
}
@container wlp-energy-product (min-width: 950px) {
  .wlp-energy-product__headline {
    font-size: var(--ks-font-size-display-l);
    font-weight: var(--ks-font-weight-bold);
  }
}
.wlp-energy-product__text {
  line-height: 1rem;
  font-weight: normal;
  color: #767778;
}
@container wlp-energy-product (min-width: 950px) {
  .wlp-energy-product__text {
    line-height: 2rem;
  }
}
.wlp-energy-product--prices-section {
  padding: var(--ks-spacing-stack-m) var(--ks-spacing-stack-l);
}
@container wlp-energy-product (min-width: 600px) {
  .wlp-energy-product--prices-section {
    padding: var(--ks-spacing-stack-m) var(--ks-spacing-stack-l) var(--ks-spacing-stack-m) var(--ks-spacing-stack-s);
    grid-column: 2;
    grid-row: 1/span 3;
  }
}
@container wlp-energy-product (min-width: 950px) {
  .wlp-energy-product--prices-section {
    grid-column: 3;
  }
}
.wlp-energy-product .buttons {
  display: grid;
  grid-template-columns: 1fr;
  padding: 0 var(--ks-spacing-stack-l);
  gap: 1rem;
}
@container wlp-energy-product (min-width: 600px) {
  .wlp-energy-product .buttons {
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  }
}
.wlp-energy-product__notes {
  text-align: center;
  margin: var(--ks-spacing-stack-m) var(--ks-spacing-stack-l);
}
@container wlp-energy-product (min-width: 600px) {
  .wlp-energy-product__notes {
    text-align: left;
  }
}
.wlp-energy-product__badge {
  position: absolute;
  top: -16px;
  right: -6px;
  color: var(--ks-text-color-interface-inverted);
  background-color: var(--wlp-energy-product--primary-color);
  padding: var(--ks-spacing-inset-squish-xs);
  font: var(--wlp-energy-product--font);
}

@keyframes wlpSpinner {
  100% {
    transform: rotate(1turn);
  }
}
.wlp-spinner {
  --_size: var(--wlp-spinner-size, 1.5rem);
  --_mask: conic-gradient(#0000 20%, #000),
    linear-gradient(#000 0 0) content-box;
  display: inline-block;
  box-sizing: border-box;
  width: var(--_size);
  padding: calc(var(--_size) * 0.14);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--ks-text-color-primary);
  -webkit-mask: var(--_mask);
  mask: var(--_mask);
  -webkit-mask-composite: source-out;
  mask-composite: subtract;
  animation: wlpSpinner 1s infinite linear;
}

.wlp-file-entry {
  font: var(--ks-font-interface-m);
  display: flex;
  gap: var(--ks-spacing-m);
  --_icon-color: var(--ks-text-color-primary);
}
.wlp-file-entry--failed {
  --_icon-color: var(--ks-color-negative);
  --_state-color: var(--ks-color-negative);
}
.wlp-file-entry__icon {
  --wlp-spinner-size: 2rem;
  width: var(--wlp-spinner-size);
  color: var(--_icon-color);
}
.wlp-file-entry__icon .icon {
  width: var(--wlp-spinner-size);
  height: var(--wlp-spinner-size);
}
.wlp-file-entry__content {
  flex: 1 1 auto;
}
.wlp-file-entry__name {
  font: var(--ks-font-interface-l);
  word-break: break-all;
}
.wlp-file-entry__meta {
  color: var(--ks-color-fg-alpha-6);
  margin-top: var(--ks-spacing-stack-s);
  hyphens: auto;
}
.wlp-file-entry__state {
  color: var(--_state-color);
}
.wlp-file-entry__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: end;
  gap: var(--ks-spacing-s);
  flex: 0 1 auto;
}

.wlp-file-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.wlp-file-list > * + * {
  border-top: 1px solid var(--ks-color-fg-alpha-8);
  margin-top: var(--ks-spacing-stack-m);
  padding-top: var(--ks-spacing-stack-m);
}

.personal-information__label {
  font-weight: var(--ks-font-weight-bold);
}
.personal-information__value {
  margin: 0;
}

.address {
  display: grid;
  grid-template-columns: 30% auto;
  gap: var(--ks-spacing-inset-squish-m);
  margin: 0;
}
.address__label {
  font-weight: var(--ks-font-weight-bold);
}
.address__value {
  margin: 0;
}

.l-container--wlp-advance-payment-dynamic-form {
  /* stylelint-disable-next-line property-no-unknown */
  container-name: wlp-advance-payment-dynamic-form;
}

.wlp-advance-payment {
  display: grid;
  grid-template-columns: max-content auto;
  gap: var(--ks-spacing-inset-squish-m);
  margin-bottom: var(--ks-spacing-m);
}
.wlp-advance-payment__label {
  font-weight: var(--ks-font-weight-bold);
  overflow-wrap: break-word;
  hyphens: auto;
}
.wlp-advance-payment__value {
  margin: 0;
}
.wlp-advance-payment-dynamic-form__calculator {
  margin: var(--ks-spacing-m) auto;
  display: flex;
  width: 40%;
  align-items: center;
}
@container wlp-advance-payment-dynamic-form (min-width: 450px) {
  .wlp-advance-payment-dynamic-form__calculator {
    width: 20%;
  }
}
@container wlp-advance-payment-dynamic-form (min-width: 900px) {
  .wlp-advance-payment-dynamic-form__calculator {
    width: 15%;
  }
}
.wlp-advance-payment-dynamic-form__calculator button {
  height: 100%;
}
.wlp-advance-payment-dynamic-form__calculator .l-container.l-container--rich-text {
  margin-top: 0;
  width: 100%;
}
.wlp-advance-payment-dynamic-form__calculator .c-rich-text {
  text-align: center;
  font: var(--ks-font-copy-l);
}
.wlp-advance-payment-dynamic-form__indicator {
  display: flex;
  justify-content: center;
  position: relative;
}
.wlp-advance-payment-dynamic-form__point {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0 0.5rem;
}
.wlp-advance-payment-dynamic-form__point--active .wlp-advance-payment-dynamic-form__icon-container {
  color: var(--ks-color-primary);
}
.wlp-advance-payment-dynamic-form__point--active .wlp-advance-payment-dynamic-form__icon-container::after {
  content: "";
  position: absolute;
  width: 1em;
  height: 1em;
  background-color: var(--ks-color-primary);
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.wlp-advance-payment-dynamic-form__percent {
  color: var(--ks-color-fg-to-bg-5);
  font: var(--ks-font-interface-s);
  margin: 0;
}
.wlp-advance-payment-dynamic-form__icon-container {
  position: relative;
  color: var(--ks-color-fg-to-bg-5);
}
.wlp-advance-payment-dynamic-form__icon-container .wlp-advance-payment-dynamic-form__point-line {
  position: absolute;
  width: 100%;
  height: 5px;
  top: calc(50% - 2px);
  left: 75%;
  background-color: var(--ks-color-fg-to-bg-5);
  z-index: -1;
}
.wlp-advance-payment-dynamic-form__icon-container .icon {
  border-radius: 50%;
  background: radial-gradient(circle at center, white 0%, white 50%, transparent 28.9%);
  width: 2em;
  height: 2em;
}

.advance_payment__wrapper .l-container--rich-text {
  width: 100%;
  margin-top: var(--ks-spacing-s);
}

.l-container--advance-payment-billing-plan {
  /* stylelint-disable-next-line property-no-unknown */
  container-name: advance-payment-billing-plan;
}

.wlp-advance-payment-billing-plan {
  font: var(--ks-font-interface-m);
  border-collapse: collapse;
  width: 100%;
}
.wlp-advance-payment-billing-plan th,
.wlp-advance-payment-billing-plan td {
  padding: 0.5rem;
}
.wlp-advance-payment-billing-plan th {
  text-align: left;
  font-weight: var(--ks-font-weight-regular);
}
.wlp-advance-payment-billing-plan td {
  padding-left: 1rem;
  text-align: right;
}
.wlp-advance-payment-billing-plan tr:last-of-type > * {
  background-color: var(--ks-color-fg-to-bg-9);
  width: 100%;
}
.wlp-advance-payment-billing-plan tbody th,
.wlp-advance-payment-billing-plan tbody td {
  border-top: 1px solid var(--ks-color-fg-to-bg-7);
}
.wlp-advance-payment-billing-plan thead th:last-of-type {
  text-align: right;
  white-space: nowrap;
}
.wlp-advance-payment-billing-plan__row {
  color: var(--ks-color-fg-to-bg-5);
}
.wlp-advance-payment-billing-plan__row--changeable {
  color: var(--ks-color-fg);
}
.wlp-advance-payment-billing-plan__amount--crossed {
  color: var(--ks-color-fg-to-bg-5);
  text-decoration: line-through;
}
@container advance-payment-billing-plan (min-width: 600px) {
  .wlp-advance-payment-billing-plan {
    display: flex;
    width: 100%;
    overflow: auto;
  }
  .wlp-advance-payment-billing-plan thead,
  .wlp-advance-payment-billing-plan tbody {
    display: grid;
    grid-template-rows: 1fr 1fr;
    grid-auto-columns: minmax(max-content, auto);
    grid-auto-flow: column;
  }
  .wlp-advance-payment-billing-plan--with-simulation thead,
  .wlp-advance-payment-billing-plan--with-simulation tbody {
    grid-template-rows: min-content min-content auto;
  }
  .wlp-advance-payment-billing-plan thead th {
    text-align: left;
    border-top: 1px solid var(--ks-color-fg-to-bg-7);
  }
  .wlp-advance-payment-billing-plan thead th[colspan="2"] {
    grid-row: 2/span 2;
    display: flex;
    flex-direction: column;
    align-items: baseline;
    justify-content: center;
  }
  .wlp-advance-payment-billing-plan tbody {
    flex: 1;
  }
  .wlp-advance-payment-billing-plan tr {
    display: contents;
  }
  .wlp-advance-payment-billing-plan tr:last-of-type > * {
    width: auto;
  }
  .wlp-advance-payment-billing-plan th,
  .wlp-advance-payment-billing-plan td {
    text-align: center;
    padding-left: 0.5rem;
  }
  .wlp-advance-payment-billing-plan th:first-child,
  .wlp-advance-payment-billing-plan td:first-child {
    border-top: 0;
  }
}

.wlp-bank-data {
  display: grid;
  grid-template-columns: 30% auto;
  gap: var(--ks-spacing-inset-squish-m);
  margin: 0;
}
.wlp-bank-data__label {
  font-weight: var(--ks-font-weight-bold);
  overflow-wrap: break-word;
  hyphens: auto;
}
.wlp-bank-data__value {
  margin: 0;
}

.l-container--dynamic-energy-product {
  /* stylelint-disable-next-line property-no-unknown */
  container-name: dynamic-energy-product;
}

.wlp-dynamic-energy-product {
  --wlp-energy-product--primary-color: var(--ks-color-secondary);
  --wlp-energy-product--font: var(--ks-font-interface-m);
  --wlp-energy-product--font-total: var(--ks-font-interface-l);
  --wlp-energy-product--font-dynamic: var(--ks-font-interface-xl);
  display: grid;
  gap: var(--ks-spacing-m);
  grid-auto-flow: row;
  align-items: start;
  font: var(--wlp-energy-product--font);
  color: var(--ks-text-color-default);
  border: 2px solid var(--wlp-energy-product--primary-color);
  padding: var(--ks-spacing-m);
  position: relative;
  grid-template-columns: 1fr;
  grid-template-rows: auto auto auto auto;
  grid-template-areas: "header" "aside" "interim" "dynamic" "footer";
}
@container dynamic-energy-product (min-width: 600px) {
  .wlp-dynamic-energy-product {
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "header header" "aside aside" "interim dynamic" "footer footer";
  }
}
@container dynamic-energy-product (min-width: 900px) {
  .wlp-dynamic-energy-product {
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: auto auto 1fr;
    grid-template-areas: "header header header" "aside interim dynamic" "aside footer footer";
  }
}
.wlp-dynamic-energy-product__badge {
  position: absolute;
  top: -16px;
  right: -6px;
  color: var(--ks-color-fg-inverted);
  background-color: var(--wlp-energy-product--primary-color);
  padding: var(--ks-spacing-inset-squish-xs);
  font: var(--ks-font-interface-s);
}
.wlp-dynamic-energy-product__header {
  grid-area: header;
}
.wlp-dynamic-energy-product__aside {
  --c-rich-text--font: var(--wlp-energy-product--font);
  grid-area: aside;
  display: flex;
  flex-wrap: wrap;
  gap: var(--ks-spacing-m);
}
.wlp-dynamic-energy-product__aside > * {
  flex: 1;
  flex-basis: calc((500px - 100%) * 999);
}
.wlp-dynamic-energy-product__downloads {
  font: var(--wlp-energy-product--font);
  margin-top: var(--ks-spacing-m);
  display: flex;
  flex-wrap: wrap;
  gap: var(--ks-spacing-s);
  --g-link--color: var(--wlp-energy-product--primary-color);
  --g-link--color-hover: var(--wlp-energy-product--primary-color);
}
.wlp-dynamic-energy-product__downloads .icon {
  margin-right: calc(var(--ks-spacing-inline-xs) / 2);
  height: 1.25em;
  width: 1.25em;
}
.wlp-dynamic-energy-product__interim, .wlp-dynamic-energy-product__dynamic {
  --c-rich-text--font: var(--wlp-energy-product--font);
  padding: var(--ks-spacing-m);
}
.wlp-dynamic-energy-product__interim .c-headline, .wlp-dynamic-energy-product__dynamic .c-headline {
  --c-headline--color: var(--wlp-energy-product--primary-color);
  --c-headline--font-weight: var(--ks-font-weight-regular);
}
.wlp-dynamic-energy-product__interim {
  grid-area: interim;
  background-color: var(--ks-background-color-accent);
  clip-path: polygon(0% 0%, 100% 0, 100% 90%, 50% 100%, 0 90%);
  padding-bottom: calc(10% + var(--ks-spacing-m));
  margin-top: var(--ks-spacing-m);
}
@container dynamic-energy-product (min-width: 600px) {
  .wlp-dynamic-energy-product__interim {
    padding-bottom: var(--ks-spacing-m);
    padding-right: calc(10% + var(--ks-spacing-m));
    clip-path: polygon(0% 0%, 90% 0, 100% 50%, 90% 100%, 0 100%);
    margin-top: 0;
  }
}
.wlp-dynamic-energy-product__dynamic {
  grid-area: dynamic;
}
.wlp-dynamic-energy-product__prices {
  border-collapse: collapse;
  width: 100%;
}
.wlp-dynamic-energy-product__prices tr,
.wlp-dynamic-energy-product__prices td,
.wlp-dynamic-energy-product__prices th {
  align-self: flex-end;
}
.wlp-dynamic-energy-product__prices tr {
  position: relative;
  border-bottom: 1px solid var(--ks-border-color-accent);
  display: flex;
  padding: 0.5rem 0;
}
.wlp-dynamic-energy-product__prices th {
  flex: 1;
  vertical-align: baseline;
  font-weight: var(--ks-font-weight-regular);
  text-align: left;
  padding: var(--ks-spacing-stack-m) var(--ks-spacing-inline-xs) var(--ks-spacing-stack-m) 0;
}
.wlp-dynamic-energy-product__prices td {
  vertical-align: baseline;
  padding: var(--ks-spacing-stack-m) 0;
}
.wlp-dynamic-energy-product__price-row {
  position: relative;
}
.wlp-dynamic-energy-product__price-row td {
  text-align: right;
  white-space: nowrap;
}
.wlp-dynamic-energy-product__total-price {
  margin-top: var(--ks-spacing-stack-m);
  text-align: right;
  color: var(--wlp-energy-product--primary-color);
  font: var(--wlp-energy-product--font-total);
  font-weight: var(--ks-font-weight-bold);
}
.wlp-dynamic-energy-product__dynamic .wlp-dynamic-energy-product__total-price {
  font: var(--wlp-energy-product--font-dynamic);
  font-weight: var(--ks-font-weight-bold);
}
.wlp-dynamic-energy-product__notice {
  display: flex;
  gap: var(--ks-spacing-inline-s);
}
.wlp-dynamic-energy-product__notice .icon {
  width: 2.5em;
  height: 2.5em;
  color: var(--wlp-energy-product--primary-color);
  flex-shrink: 0;
}
.wlp-dynamic-energy-product__footer {
  grid-area: footer;
  justify-self: end;
}
.wlp-dynamic-energy-product__icon-plus.icon {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translate(-50%, 50%);
  border: 2px solid var(--ks-text-color-interface);
  border-radius: 50%;
  height: 1.3rem;
  width: 1.3rem;
}

.wlp-user-data {
  display: grid;
  grid-template-columns: 30% auto;
  gap: var(--ks-spacing-inset-squish-m);
  margin: 0;
}
.wlp-user-data__label {
  font-weight: var(--ks-font-weight-bold);
  overflow-wrap: break-word;
  hyphens: auto;
}
.wlp-user-data__value {
  margin: 0;
}

.wlp-boxed-tags--content-box .tag-label-container, .wlp-boxed-tags--teaser-box .tag-label-container {
  transform: translateY(50%);
}

.l-container--order-status {
  /* stylelint-disable-next-line property-no-unknown */
  container-name: order-status;
}

.wlp-order-status {
  --wlp-order-status--indicator-size: 2rem;
  --wlp-order-status--image-size: 5rem;
  --wlp-order-status--background: var(--ks-background-color-accent);
  padding: var(--ks-spacing-m);
  background-color: var(--wlp-order-status--background);
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--ks-spacing-l) var(--ks-spacing-m);
  align-items: center;
  font: var(--ks-font-interface-m);
}
@container order-status (min-width: 600px) {
  .wlp-order-status {
    grid-template-columns: unset;
    grid-auto-flow: column;
    align-items: center;
    display: flex;
  }
}
.wlp-order-status__image {
  width: var(--wlp-order-status--image-size);
  height: var(--wlp-order-status--image-size);
  display: flex;
  justify-content: center;
  align-items: center;
  justify-self: center;
}
.wlp-order-status__image img {
  max-height: 100%;
}
.wlp-order-status__meta {
  display: flex;
  flex-direction: column;
  gap: var(--ks-spacing-s);
}
.wlp-order-status__meta:first-child {
  grid-column: span 2;
}
.wlp-order-status__meta-label {
  color: var(--ks-color-secondary);
}
@container order-status (min-width: 600px) {
  .wlp-order-status__meta-label {
    display: block;
  }
}
.wlp-order-status__progress {
  display: contents;
  padding: 0;
  margin: 0;
}
@container order-status (min-width: 600px) {
  .wlp-order-status__progress {
    display: flex;
    flex: 1;
    gap: inherit;
    justify-content: space-around;
  }
}
.wlp-order-status__step {
  display: contents;
  color: var(--ks-color-fg-to-bg-6);
  list-style: none;
  position: relative;
}
.wlp-order-status__step--done {
  color: var(--ks-color-fg-to-bg-1);
}
.wlp-order-status__step--done .wlp-order-status__indicator-circle {
  color: var(--ks-color-fg-inverted);
  background: var(--ks-color-fg-to-bg-4);
}
.wlp-order-status__step--active {
  color: var(--ks-color-primary);
}
.wlp-order-status__step--active .wlp-order-status__indicator-circle {
  color: var(--ks-color-primary-inverted);
  background: var(--ks-color-primary);
  transform: scale(1.25);
}
.wlp-order-status__step--active:last-child {
  color: var(--ks-color-positive);
}
.wlp-order-status__step--active:last-child .wlp-order-status__indicator-circle {
  color: var(--ks-color-fg-inverted);
  background: var(--ks-color-positive);
}
@container order-status (min-width: 600px) {
  .wlp-order-status__step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--ks-spacing-s);
    text-align: center;
    flex: 1 0 0px;
  }
  .wlp-order-status__step::before, .wlp-order-status__step::after {
    position: absolute;
    top: calc(var(--ks-font-size-display-l) * var(--ks-line-height-display-l));
    height: 1px;
    width: 50%;
    background-color: var(--ks-color-fg-to-bg-7);
  }
  .wlp-order-status__step::before {
    content: "";
    left: calc(0px - var(--ks-spacing-m) / 2);
  }
  .wlp-order-status__step:first-child::before {
    left: calc(var(--ks-spacing-m) / 2);
  }
  .wlp-order-status__step:not(:last-child)::after {
    content: "";
    right: calc(0px - var(--ks-spacing-m) / 2);
  }
}
.wlp-order-status__indicator {
  position: relative;
  width: var(--wlp-order-status--indicator-size);
  height: var(--wlp-order-status--indicator-size);
  justify-self: center;
}
.wlp-order-status__indicator::before {
  content: "";
  position: absolute;
  width: 1px;
  height: var(--ks-spacing-l);
  background: var(--ks-color-fg-to-bg-7);
  bottom: 100%;
  left: calc(var(--wlp-order-status--indicator-size) / 2);
}
.wlp-order-status__step:first-child .wlp-order-status__indicator::before {
  height: var(--ks-spacing-m);
}
@container order-status (min-width: 600px) {
  .wlp-order-status__indicator::before {
    display: none;
  }
}
@container order-status (min-width: 600px) {
  .wlp-order-status__indicator {
    display: flex;
    margin-top: calc(var(--ks-font-size-display-l) * var(--ks-line-height-display-l) - var(--wlp-order-status--indicator-size) / 2);
  }
}
.wlp-order-status__indicator-circle {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  display: inline-block;
  background: var(--ks-color-fg-to-bg-7);
  z-index: 1;
}
.wlp-order-status__indicator-circle .icon {
  width: 100%;
  height: 100%;
  padding: 0.5rem;
}

.l-container--inbox {
  /* stylelint-disable-next-line property-no-unknown */
  container-name: inbox;
}

.wlp-inbox {
  width: 100%;
  margin: 0 auto;
}
.wlp-inbox__container {
  width: 100%;
  margin: 0 auto;
  padding: 0;
}
.wlp-inbox__list {
  list-style: none;
  background-color: var(--ks-background-color-accent-base);
  width: 100%;
  padding: 0;
}
@container inbox (min-width: 900px) {
  .wlp-inbox__list {
    padding: var(--ks-spacing-m) 0;
  }
}
.wlp-inbox__list-item {
  width: 100%;
  margin: 0 auto;
  border-bottom: 1px solid var(--ks-color-fg-to-bg-7);
}
.wlp-inbox__list-item:last-child {
  border-bottom-color: transparent;
}
.wlp-inbox__list-item:hover {
  background-color: var(--ks-color-fg-to-bg-7);
}
.wlp-inbox__list-button {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: baseline;
  width: 100%;
  margin: 0 auto;
  padding: var(--ks-spacing-m);
  gap: 0.5rem;
  min-height: calc(var(--ks-line-height-interface-m) * var(--ks-font-size-interface-m) + var(--ks-line-height-interface-s) * var(--ks-font-size-interface-s) + 0.8rem + var(--ks-spacing-m) * 3);
}
@container wlp-inbox (min-width: 900px) {
  .wlp-inbox__list-button {
    padding: var(--ks-spacing-m) var(--ks-spacing-l);
  }
}
.wlp-inbox__list-date {
  font-size: var(--ks-font-size-interface-s);
  line-height: var(--ks-line-height-interface-m);
  color: var(--ks-color-fg-to-bg-2);
}
.wlp-inbox__list-attachments {
  display: flex;
  justify-content: flex-end;
  margin-top: var(--ks-spacing-m);
}
.wlp-inbox__list-icon.icon {
  width: 1.2em;
  margin-right: 3px;
}

.wlp-message {
  background-color: var(--ks-background-color-default);
}
.wlp-message__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--ks-spacing-m);
  border-bottom: 1px solid var(--ks-color-fg-to-bg-8);
}
.wlp-message__header-title {
  color: var(--ks-text-color-interface);
  font-size: var(--ks-font-size-display-m);
}
.wlp-message__content {
  padding: var(--ks-spacing-m);
}
.wlp-message__list {
  list-style: none;
  margin: 0 auto;
  padding: 0;
}
.wlp-message__text + .wlp-message__list {
  margin-top: var(--ks-spacing-xl);
}
.wlp-message__list .wlp-message__item-link {
  display: flex;
  text-decoration: none;
  color: var(--ks-text-color-interface);
}
.wlp-message__list .wlp-message__item-link .icon {
  width: 1.5em;
  height: 1.5em;
}
.wlp-message__list .wlp-message__item-link:hover {
  color: var(--g-link--color-hover);
  text-decoration: var(--g-link--text-decoration-hover);
}
@media (min-width: 900px) {
  .wlp-message__paragraph {
    overflow-y: auto;
    max-height: 20rem;
  }
}
.wlp-message__item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--ks-spacing-m);
}
.wlp-message__item-date {
  color: var(--ks-text-color-interface);
}

.c-content-box,
.c-storytelling__box__content,
.c-quote__content {
  width: 100% !important;
}

.wlp-rich-choice .l-container--headline,
.wlp-rich-choice .l-container--rich-text,
.wlp-bundle-item .l-container--headline {
  container-type: unset;
}

@container text-media (min-width: 600px) {
  .text-media--intext .text-media__gallery {
    max-width: 50%;
    min-width: 0;
    padding-bottom: var(--ks-spacing-xs);
  }
  .text-media--intext.text-media--left .text-media__gallery {
    float: left;
    padding-right: var(--ks-spacing-m);
  }
  .text-media--intext.text-media--right .text-media__gallery {
    float: right;
    padding-left: var(--ks-spacing-m);
  }
}
@container logo-tiles (min-width: 640px) {
  .c-logo-tiles {
    --c-logo-tiles--gutter: 2rem !important;
    --c-logo-tiles--cols: 4 !important;
  }
}
@container quote (min-width: 640px) {
  .c-quote {
    --c-quote_image--max-width: 20%;
    display: flex;
  }
  .c-quote__image {
    margin-bottom: 0;
  }
}
@container quote (min-width: 960px) {
  .c-quote {
    --c-quote--align: center;
    --c-quote_image--max-width: 30%;
    --c-quote_content--padding-left: 4rem;
    --c-quote_icon--font-size: 4rem;
  }
}
@container visual (min-width: 1200px) {
  .c-visual__box {
    --c-visual_box--max-width: 70% !important;
  }
}
@container slider (min-width: 640px) {
  .c-visual-slider .c-slider__bullet {
    display: none;
  }
  .c-visual-slider .c-slider-nav {
    border-bottom: 1px solid var(--c-visual-slider_nav--border-bottom-color);
    margin-top: 0;
  }
}
@container slider (max-width: 638px) {
  .c-visual-slider .c-visual-slide--preview {
    clip: rect(1px, 1px, 1px, 1px);
    border: 0;
    -webkit-clip-path: inset(100%);
    clip-path: inset(100%);
    height: 1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    white-space: nowrap;
    width: 1px;
  }
}
@container slider (min-width: 960px) {
  .c-slider__arrows {
    display: block !important;
  }
}
@container headline (min-width: 640px) {
  .c-headline {
    max-width: 70%;
  }
}
@container headline (min-width: 960px) {
  .c-headline {
    --c-headline--margin-bottom: 2rem;
  }
}
@container rich-text (min-width: 640px) {
  [ks-inverted],
  [ks-theme] {
    --c-rich-text_headline--margin: 1.5em 0 1em;
  }
}
.edl-block-advance-payment .wlp-advance-payment-billing-plan {
  margin-top: var(--ks-spacing-stack-m);
}
.edl-block-advance-payment .c-collapsible-box {
  --c-collapsible-box_content--padding: 0;
  margin-top: var(--ks-spacing-stack-l);
}
.edl-block-advance-payment__dynamic-billing-plan-simulation {
  margin-top: var(--ks-spacing-stack-l);
}

.payment-errors .wlp-notification {
  padding: var(--ks-spacing-stack-s);
  margin: var(--ks-spacing-stack-m) 0;
}

.elmo-useridentification-errors .wlp-notification {
  padding: var(--ks-spacing-stack-s);
  margin: var(--ks-spacing-stack-m) 0;
}

.edl-block-summary--elmo-useridentification .edl-contract-result {
  margin-top: var(--ks-spacing-stack-l);
}

@container edl-block-summary-results (min-width: 451px) {
  .edl-block-summary--elmo-useridentification .edl-block-summary__results {
    display: grid;
    grid-template: 1fr 1fr/1fr auto;
  }
  .edl-block-summary--elmo-useridentification .edl-billing-address-result {
    grid-row: 1/3;
  }
  .edl-block-summary--elmo-useridentification .edl-contract-result {
    margin-top: 0;
  }
}
.pricefinder-errors .wlp-notification {
  padding: var(--ks-spacing-stack-s);
  margin: var(--ks-spacing-stack-m) 0;
}

.l-container--energy-product-choice {
  /* stylelint-disable-next-line property-no-unknown */
  container-name: energy-product-choice;
}

.energy-product-choice__products {
  grid-gap: 15px;
  display: grid;
  grid-template-columns: repeat(1, 1fr);
}
.energy-product-choice__products--two-products {
  grid-gap: 15px;
  display: grid;
  grid-template-columns: repeat(1, 1fr);
}
@container energy-product-choice (min-width: 900px) {
  .energy-product-choice__products--two-products {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }
}
.energy-product-choice__products--multiple-products {
  grid-gap: 15px;
  display: grid;
  grid-template-columns: repeat(1, 1fr);
}
@container energy-product-choice (min-width: 800px) {
  .energy-product-choice__products--multiple-products {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }
}
@container energy-product-choice (min-width: 1100px) {
  .energy-product-choice__products--multiple-products {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }
}
.energy-product-choice__details {
  border: var(--ks-border-width-default) solid var(--ks-border-color-primary);
}
.energy-product-choice__details-head, .energy-product-choice__details-foot {
  display: flex;
  justify-content: space-between;
  padding: var(--ks-spacing-inset-squish-m);
  align-items: center;
  flex-wrap: wrap;
  gap: var(--ks-spacing-m);
}
.energy-product-choice__details-head .l-container--headline, .energy-product-choice__details-foot .l-container--headline {
  container-type: normal;
  flex: 1 0 auto;
  width: auto;
}
.energy-product-choice__details-foot .l-container--headline {
  visibility: hidden;
  height: 0;
}
.energy-product-choice__details-actions {
  flex: 1;
  min-width: min(100%, 19rem);
  --gutter: var(--ks-spacing-stack-xs);
}
.energy-product-choice__details-actions :last-child {
  flex: 1;
}

.workflow-choice .c-form-check-group__label {
  display: none;
}
.workflow-choice .c-form-check .c-form-check__field .c-form-check__label {
  margin-right: 1rem;
}

.edl-choice [aria-pressed=true] {
  box-shadow: 0px 0px 20px var(--ks-box-shadow-color-card);
}

.edl-button-choice > span {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.edl-button-choice__image {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: var(--ks-spacing-stack-s);
}
.edl-button-choice__label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--ks-spacing-inline-s);
}
.edl-button-choice__label > :only-child {
  width: 100%;
}
.edl-button-choice .c-tag-label {
  white-space: nowrap;
}

.edl-image-choice {
  position: relative;
}
.edl-image-choice img {
  width: 100%;
}
.edl-image-choice .c-tag-label {
  position: absolute;
  bottom: 1rem;
  right: 1rem;
}

.edl-radio-choice .c-tag-label {
  margin: 0 1.5rem;
}

.l-block {
  padding: var(--ks-spacing-stack-l) var(--ks-spacing-inset-m);
  width: 100%;
  max-width: var(--l-section--content-width-wide);
  margin: auto;
  color: var(--ks-text-color-default);
}
.l-block-style--accent {
  background-color: var(--ks-background-color-accent);
}
.l-block-style--highlight {
  background-color: var(--ks-background-color-primary-inverted);
}
.l-block-style--default {
  background-color: var(--ks-background-color-default);
}
.l-block--width-full {
  max-width: 100%;
  padding-left: 0;
  padding-right: 0;
}
.l-block--width-narrow {
  max-width: 48em;
  margin-left: 0;
}
.l-block--space-before-none {
  padding-top: 0;
}
.l-block--space-before-small {
  padding-top: var(--ks-spacing-stack-m);
}
.l-block--space-after-none {
  padding-bottom: 0;
}
.l-block--space-after-small {
  padding-bottom: var(--ks-spacing-stack-m);
}
.l-block__hint-link {
  display: inline-block;
  margin-top: var(--ks-spacing-stack-xs);
  font: var(--ks-font-interface-m);
}
.l-block__hint-box {
  margin-top: var(--ks-spacing-stack-m);
}
.l-block .c-form-check__invalid-message {
  font: var(--ks-font-interface-s);
}

.edl-file-upload {
  --edl-file-upload-border-color: var(--ks-color-primary-alpha-5);
  --edl-file-upload-border-color-hover: var(--ks-color-primary-alpha-5);
  --edl-file-upload-border-color-active: var(--ks-border-color-primary);
  --edl-file-upload-border-style: dashed;
  --edl-file-upload-background-color: var(--ks-color-fg-to-bg-9);
  --edl-file-upload-background-color-hover: var(--ks-color-primary-alpha-9);
  --edl-file-upload-background-color-active: var(--ks-color-primary-alpha-8);
  --edl-file-upload-color: var(--ks-text-color-default);
}
.edl-file-upload__drop-zone {
  font: var(--ks-font-interface-m);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--ks-spacing-inset-xl);
  border-width: 2px;
  border-radius: var(--ks-border-radius-card);
  border-color: var(--edl-file-upload-border-color);
  border-style: var(--edl-file-upload-border-style);
  background-color: var(--edl-file-upload-background-color);
  color: var(--edl-file-upload-color);
  transition: border var(--ks-transition-hover);
  text-align: center;
  cursor: pointer;
}
.edl-file-upload__drop-zone:hover {
  background-color: var(--edl-file-upload-background-color-hover);
  border-color: var(--edl-file-upload-border-color-hover);
}
.edl-file-upload__drop-zone--active {
  border-color: var(--edl-file-upload-border-color-active);
  background-color: var(--edl-file-upload-background-color-active);
}
.edl-file-upload__drop-zone--invalid {
  border-color: var(--ks-color-negative);
}
.edl-file-upload__drop-zone .icon {
  color: var(--ks-text-color-primary);
  margin-bottom: var(--ks-spacing-stack-m);
}
.edl-file-upload__file-list {
  margin-top: var(--ks-spacing-l);
}
.edl-file-upload__file-list .c-button {
  white-space: nowrap;
}
.edl-file-upload__error {
  font: var(--ks-font-interface-m);
  text-align: center;
  color: var(--ks-color-negative);
}

.wlp-inbox-modal {
  position: fixed;
  z-index: 1;
  width: 100%;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  height: 100%;
}
@media (min-width: 900px) {
  .wlp-inbox-modal {
    width: 70%;
    height: 70%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
}
.wlp-inbox-modal--open {
  z-index: -1;
  position: fixed;
  inset: -100%;
  background-color: var(--ks-color-fg-alpha-3);
}
.wlp-inbox-modal__close {
  position: absolute;
  z-index: 2;
  right: 0;
  margin: var(--ks-spacing-l) var(--ks-spacing-m);
}
.wlp-inbox-modal .wlp-message {
  flex: 1;
}
.wlp-inbox-modal__button {
  background-color: var(--ks-background-color-default);
  padding: 0 var(--ks-spacing-m) var(--ks-spacing-m);
}
.wlp-inbox-modal .c-button {
  width: 100%;
}

.edl-step-summary {
  font: var(--ks-font-interface-m);
  display: flex;
  gap: var(--ks-spacing-inline-m);
  padding: var(--ks-spacing-stack-m) 0 var(--ks-spacing-stack-s);
  border-top: 1px solid var(--ks-border-color-accent);
}
.edl-step-summary__icon {
  width: 2.5rem;
  height: 2.5rem;
}
.edl-step-summary__content {
  flex: 1;
}
.edl-step-summary:not(:last-child) {
  border-top: 1px solid var(--ks-border-color-accent);
}

.l-container--edl-block-summary-results {
  /* stylelint-disable-next-line property-no-unknown */
  container-name: edl-block-summary-results;
}

.edl-block-summary {
  margin: var(--ks-spacing-stack-m) 0;
}
.edl-block-summary__content {
  display: flex;
  flex-direction: row;
  gap: var(--ks-spacing-s);
}
.edl-block-summary__icon {
  width: 3rem;
  height: 3rem;
  color: var(--ks-color-primary);
}
.edl-block-summary header.c-headline {
  margin-bottom: var(--ks-spacing-stack-s);
}

.contact-person {
  grid-gap: var(--ks-spacing-m);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr));
}
.contact-person .c-contact {
  --c-contact--gutter: var(--ks-spacing-s);
  --c-contact--wrap-threshold: 25rem;
}
.contact-person .c-contact__image {
  text-align: left;
  max-width: 10rem;
}

@container text-media (min-width: 600px) {
  .edl-text-image {
    display: flex;
  }
}
.edl-text-image.text-media--right {
  flex-direction: row-reverse;
}
.edl-text-image--text-top {
  align-items: start;
}
.edl-text-image--text-center {
  align-items: center;
}
.edl-text-image--text-bottom {
  align-items: end;
}
.edl-text-image .l-container--rich-text {
  width: 100%;
}

.generic-request .l-container--rich-text {
  container-type: unset;
}
.generic-request .c-form-check__field .c-rich-text {
  margin-top: -5px;
}

.l-step--page {
  display: flex;
  flex-direction: column;
  gap: var(--ks-spacing-stack-l);
  margin-bottom: var(--ks-spacing-stack-m);
}
.l-step--page .wlp-progress-bar {
  margin: var(--ks-spacing-l) auto;
  max-width: var(--l-section--content-width-wide);
  width: 100%;
}

.step--stacked + .step--stacked .c-collapsible-box details {
  border-bottom: 0;
}

.l-step {
  display: flex;
  flex-direction: column;
}
.l-step__intro, .l-step__nav {
  padding: 0 var(--ks-spacing-inset-m);
  max-width: var(--l-section--content-width-wide);
  margin: auto;
  width: 100%;
}
.l-step__nav {
  margin-top: var(--ks-spacing-m);
}
.l-step__text {
  padding-bottom: var(--l-section--space-small);
}
.l-step--sidebar {
  padding: var(--ks-spacing-m);
}
.l-step--page {
  background-color: var(--ks-background-color-default);
  gap: var(--ks-spacing-stack-xs);
}

.l-header {
  width: 100%;
  box-shadow: var(--ks-box-shadow-surface);
  z-index: 3;
  position: relative;
}
.l-header .l-section__container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--ks-spacing-stack-m);
  gap: var(--ks-spacing-stack-m);
}
.l-header__logo {
  height: var(--l-header--logo-height, 1.5rem);
}
.l-header__account-prefix {
  color: var(--ks-text-color-primary);
  margin-right: var(--ks-spacing-stack-m);
}
@media (max-width: 40em) {
  .l-header__account-prefix {
    margin-right: 0;
  }
}
.l-header__account-prefix button {
  background: var(--g-link--background);
  border-radius: var(--g-link--border-radius);
  color: var(--g-link--color);
  text-decoration: var(--g-link--text-decoration);
}
.l-header__account-prefix button:hover {
  color: var(--g-link--color-hover);
  text-decoration: var(--g-link--text-decoration-hover);
}
.l-header__account-container {
  width: 100%;
  overflow: auto;
}
.l-header__contract-account-container {
  position: relative;
  overflow: inherit !important;
}
.l-header__contract-account-container, .l-header__account-container {
  color: var(--ks-text-color-interface);
  background-color: var(--ks-color-fg-to-bg-8);
}
.l-header__account-container, .l-header__contract-account {
  max-width: var(--l-section--content-width-wide);
  margin: auto;
}
.l-header__contract-account {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  padding: var(--ks-spacing-m);
}
@media (max-width: 40em) {
  .l-header__contract-account {
    font: var(--ks-font-interface-s);
  }
}
@media (max-width: 40em) and (max-width: 40em) {
  .l-header__contract-account .c-button .icon {
    display: none;
  }
}
.l-header__contract-account--selectable:hover {
  background-color: var(--ks-background-color-clear-interactive-hover);
}
.l-header__account-label {
  display: flex;
}
.l-header__account-label > div {
  display: flex;
  align-items: center;
}
@media (max-width: 40em) {
  .l-header__account-label > div {
    flex-direction: column;
  }
}
.l-header__account-label .icon {
  margin-right: 1rem;
  width: 2em;
  height: 3em;
}
.l-header__account-modal {
  position: absolute;
  z-index: 3;
  width: 100%;
  top: 0;
}
.l-header__account-modal--open {
  z-index: -1;
  position: fixed;
  inset: 0;
  background-color: rgba(255, 255, 255, 0.75);
}

.l-footer {
  align-items: center;
  padding: 0 var(--ks-spacing-xxl);
}
.l-footer__links {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.l-footer__links ul {
  padding: 0;
  margin-bottom: var(--ks-spacing-m);
}
.l-footer__links ul li {
  margin-bottom: var(--ks-spacing-xs);
  display: block;
}
.l-footer__links ul li a {
  color: var(--ks-text-color-interface-interactive);
  text-decoration: none;
}
.l-footer__links ul li a:hover {
  color: var(--ks-text-color-interface-interactive-hover);
}
.l-footer__logo {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.l-footer__logo img {
  max-height: 4rem;
  width: 100%;
}

.edl-billing-address-result p {
  margin: 0;
}

.edl-contract-result p {
  margin: 0;
}

.edl-meter-number-result p {
  margin: 0;
}

.edl-personal-information-result p {
  margin: 0;
}

.edl-contact-result p {
  margin: 0;
}

.edl-availability-check-result p {
  margin: 0;
}

.edl-address-result p {
  margin: 0;
}

.edl-product-choice-result {
  display: flex;
  gap: var(--ks-spacing-inline-m);
  justify-content: space-between;
}
.edl-product-choice-result__image {
  max-width: 15rem;
  height: auto;
  padding: var(--ks-spacing-stack-m) 0;
}
.edl-product-choice-result__price {
  flex-shrink: 0;
}

.edl-file-upload-result a[download] {
  display: inline-flex;
  gap: 0.2em;
}
.edl-file-upload-result .icon {
  height: 1em;
  width: 1em;
}

.excerpt-wrapper .energy-product-with-followup-result .wlp-bundle-summary-item {
  flex: 1;
  padding: var(--ks-spacing-l);
}
@media (max-width: 40em) {
  .excerpt-wrapper .energy-product-with-followup-result .wlp-bundle-summary-item {
    padding: var(--ks-spacing-m);
  }
}
.excerpt-wrapper .energy-product-with-followup-result .wlp-bundle-summary-item:nth-child(2) {
  display: none;
}
.excerpt-wrapper .energy-product-with-followup-result .wlp-bundle-summary-item:nth-child(1) {
  padding: var(--ks-spacing-m);
}

.energy-product-with-followup-result {
  display: flex;
}
.energy-product-with-followup-result .l-container.l-container--wlp-bundle-summary-item {
  container-type: unset;
  flex: 1;
}
@media (max-width: 40em) {
  .energy-product-with-followup-result {
    flex-direction: column;
  }
}
.energy-product-with-followup-result .wlp-bundle-summary-item {
  flex: 0.5 0 50%;
  padding: var(--ks-spacing-xl) var(--ks-spacing-xl) var(--ks-spacing-xl) 0;
}
.energy-product-with-followup-result .wlp-bundle-summary-item:nth-child(2) {
  padding: var(--ks-spacing-xl);
  background-color: var(--ks-background-color-accent);
}
@media (max-width: 40em) {
  .energy-product-with-followup-result .wlp-bundle-summary-item:nth-child(1) {
    padding: var(--ks-spacing-m) 0;
  }
  .energy-product-with-followup-result .wlp-bundle-summary-item:nth-child(2) {
    padding: var(--ks-spacing-m);
    margin-top: var(--ks-spacing-m);
  }
}

.excerpt-wrapper .energy-product-with-followup-terms-result {
  width: 100%;
  padding: var(--ks-spacing-s);
}
@media (max-width: 40em) {
  .excerpt-wrapper .energy-product-with-followup-terms-result {
    padding: var(--ks-spacing-m);
  }
  .excerpt-wrapper .energy-product-with-followup-terms-result .edl-result.edl-result--default {
    grid-column-gap: 0;
    grid-row-gap: 0;
  }
}

.energy-product-with-followup-terms-result {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  width: calc(50% - 2rem);
}
@media (max-width: 40em) {
  .energy-product-with-followup-terms-result {
    flex-direction: column;
    width: 100%;
  }
  .energy-product-with-followup-terms-result .edl-result.edl-result--default {
    grid-column-gap: 0;
    grid-row-gap: 0;
  }
}
.energy-product-with-followup-terms-result .edl-result {
  flex: 1;
  border-top: var(--ks-border-width-default) solid var(--ks-border-color-accent);
  padding: var(--ks-spacing-m) 0 0;
}
.energy-product-with-followup-terms-result .edl-result--default + .edl-result--default {
  margin-top: 0;
  padding-left: 0;
}

.l-container--energy-product-terms-result {
  /* stylelint-disable-next-line property-no-unknown */
  container-name: energy-product-terms-result;
}

.energy-product-terms-result__links {
  display: flex;
  margin: var(--ks-spacing-stack-s) 0;
  flex-direction: column;
  list-style: none;
  padding: 0;
  gap: var(--ks-spacing-s);
}
@container energy-product-terms-result (min-width: 500px) {
  .energy-product-terms-result__links {
    flex-direction: row;
  }
}
@container energy-product-terms-result (min-width: 500px) {
  .energy-product-terms-result__link:not(:first-child)::before {
    content: "•";
    margin-right: var(--ks-spacing-s);
    font-weight: bold;
  }
}

.edl-result--default {
  display: grid;
  grid-template-columns: minmax(0, max-content) minmax(0, 1fr);
  grid-column-gap: var(--ks-spacing-inline-m);
  grid-row-gap: var(--ks-spacing-stack-s);
  margin: var(--ks-spacing-stack-s) 0;
}
@media (min-width: 55em) {
  .edl-result--default {
    margin: 0;
  }
}
.edl-result--default .edl-result__label {
  text-align: left;
}
.edl-result--default .edl-result__value {
  margin: 0;
  text-align: right;
  word-break: break-word;
}
.edl-result--default + .edl-result--default {
  margin-top: var(--ks-spacing-stack-m);
}
.edl-result__label .l-container--rich-text {
  container-type: unset;
}
@media (min-width: 55em) {
  .edl-result__label .l-container--rich-text {
    margin-top: 1rem;
  }
}

.l-container--main-nav {
  /* stylelint-disable-next-line property-no-unknown */
  container-name: main-nav;
  width: 100%;
  margin: auto;
  z-index: 2;
  position: sticky;
  bottom: 0;
  background-color: var(--ks-background-color-default);
  overflow: inherit !important;
  padding: 0 !important;
}
@media (min-width: 650px) {
  .l-container--main-nav {
    bottom: auto;
    top: 0;
  }
}

.l-main-nav {
  width: 100%;
  display: flex;
  gap: var(--ks-spacing-s);
  padding: var(--ks-spacing-m) var(--ks-spacing-m) 0 var(--ks-spacing-m);
  max-width: var(--l-section--content-width-wide);
  margin: auto;
  box-shadow: var(--ks-box-shadow-surface);
}
@container main-nav (min-width: 650px) {
  .l-main-nav {
    padding: var(--ks-spacing-m);
    box-shadow: none;
  }
}
.l-main-nav__list {
  margin: 0;
  padding: 0;
  display: flex;
  gap: var(--ks-spacing-s);
  list-style: none;
  overflow: hidden;
  white-space: nowrap;
}
.l-main-nav__link {
  --g-link--color: var(--ks-text-color-interface-interactive);
  --g-link--text-decoration: none;
  --g-link--color-hover: var(--ks-text-color-interface-interactive-hover);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--ks-spacing-inset-squish-m);
  height: 100%;
  font: var(--ks-font-interface-m);
}
.l-main-nav__link:not(.c-button) {
  transition: unset;
}
@container main-nav (min-width: 650px) {
  .l-main-nav__link {
    display: block;
    font: var(--ks-font-interface-l);
  }
}
.l-main-nav__link--current {
  border-bottom: 2px solid;
  --g-link--color: var(--ks-text-color-interface-interactive-active);
  --g-link--color-hover: var(--ks-text-color-interface-interactive-active);
}
.l-main-nav__more {
  color: var(--g-link--color);
  text-decoration: var(--g-link--text-decoration);
}
.l-main-nav__more:hover, .l-main-nav__more:focus {
  color: var(--g-link--color-hover);
  text-decoration: var(--g-link--text-decoration-hover);
}
.l-main-nav__link .icon, .l-main-nav__more::before {
  width: 1.5em;
}
@container main-nav (min-width: 650px) {
  .l-main-nav__link .icon, .l-main-nav__more::before {
    margin-right: var(--ks-spacing-s);
    height: 1.25em;
    width: 1.25em;
  }
}
.l-main-nav__more::before {
  text-align: center;
  content: "⋮";
  font-size: 1.35em;
}
@container main-nav (min-width: 650px) {
  .l-main-nav__more::before {
    font-size: unset;
  }
}
@container main-nav (min-width: 650px) {
  .l-main-nav .icon--placeholder {
    display: none;
  }
}
.l-main-nav__dropdown {
  position: relative;
  padding: var(--ks-spacing-inset-squish-m);
}
.l-main-nav__dropdown-list {
  position: absolute;
  right: var(--ks-spacing-m);
  list-style: none;
  bottom: 100%;
  padding-left: 0;
  padding-top: var(--ks-spacing-s);
  padding-right: var(--ks-spacing-s);
  padding-bottom: calc(var(--ks-spacing-s) + var(--ks-spacing-m));
  filter: drop-shadow(var(--ks-box-shadow-card));
}
.l-main-nav__dropdown-list::before {
  background-color: var(--ks-background-color-default);
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  clip-path: polygon(50% 0%, 100% 0, 100% calc(100% - var(--ks-spacing-m)), 85% calc(100% - var(--ks-spacing-m)), 80% 100%, 74% calc(100% - var(--ks-spacing-m)), 34% calc(100% - var(--ks-spacing-m)), 0 calc(100% - var(--ks-spacing-m)), 0 35%, 0 0);
}
@container main-nav (min-width: 650px) {
  .l-main-nav__dropdown-list::before {
    clip-path: polygon(50% 100%, 100% 100%, 100% var(--ks-spacing-m), 85% var(--ks-spacing-m), 80% 0, 74% var(--ks-spacing-m), 34% var(--ks-spacing-m), 0 var(--ks-spacing-m), 0 65%, 0 100%);
  }
}
@container main-nav (min-width: 650px) {
  .l-main-nav__dropdown-list {
    top: unset;
    bottom: auto;
    padding-top: calc(var(--ks-spacing-s) + var(--ks-spacing-m));
    padding-bottom: var(--ks-spacing-s);
  }
}
.l-main-nav__dropdown-list .l-main-nav__link {
  color: var(--ks-text-color-interface-interactive);
  display: block;
  padding: var(--ks-spacing-inset-m);
}
@container main-nav (min-width: 650px) {
  .l-main-nav__dropdown-list .l-main-nav__link {
    padding: var(--ks-spacing-inset-squish-m);
  }
}
.l-main-nav__dropdown-list .l-main-nav__link--current, .l-main-nav__dropdown-list .l-main-nav__link--current:hover {
  color: var(--ks-text-color-interface-interactive-active);
  border-bottom: 0;
}
.l-main-nav__dropdown-list .l-main-nav__link .icon {
  margin-right: var(--ks-spacing-s);
}
.l-main-nav__item--hidden {
  visibility: hidden;
}
.l-main-nav__modal {
  position: absolute;
  z-index: 1;
  width: 100%;
  top: unset;
  bottom: 70%;
  filter: drop-shadow(var(--ks-box-shadow-control));
}
@container main-nav (min-width: 650px) {
  .l-main-nav__modal {
    top: 70%;
    bottom: unset;
  }
}
.l-main-nav__modal--open {
  z-index: 1;
  position: fixed;
  inset: 0;
}

.l-portal {
  position: relative;
  display: flex;
  flex-direction: column-reverse;
}
@media (min-width: 650px) {
  .l-portal {
    flex-direction: column;
  }
}

/**
 * Do not edit directly
 * Generated on Fri, 19 Apr 2024 11:56:41 GMT
 */
:root, [ks-theme] {
  --ks-background-color-accent-base: var(--ks-color-fg-to-bg-9-base);
  --ks-background-color-accent-inverted-base: var(--ks-color-fg-to-bg-2-base);
  --ks-background-color-clear-base: var(--ks-color-transparent-base);
  --ks-background-color-clear-interactive-base: var(--ks-color-transparent-base);
  --ks-background-color-clear-interactive-hover-base: var(--ks-color-primary-alpha-8-base);
  --ks-background-color-clear-interactive-active-base: var(--ks-color-primary-alpha-7-base);
  --ks-background-color-clear-interactive-selected-base: var(--ks-color-primary-alpha-6-base);
  --ks-background-color-clear-inverted-base: var(--ks-color-transparent-base);
  --ks-background-color-clear-inverted-interactive-base: var(--ks-color-transparent-base);
  --ks-background-color-clear-inverted-interactive-hover-base: var(--ks-color-primary-inverted-alpha-7-base);
  --ks-background-color-clear-inverted-interactive-active-base: var(--ks-color-primary-inverted-alpha-6-base);
  --ks-background-color-clear-inverted-interactive-selected-base: var(--ks-color-primary-inverted-alpha-5-base);
  --ks-background-color-default-base: var(--ks-color-fg-inverted-base);
  --ks-background-color-default-inverted-base: var(--ks-color-fg-base);
  --ks-background-color-interface-base: var(--ks-color-fg-to-bg-8-base);
  --ks-background-color-interface-interactive-base: var(--ks-color-transparent-base);
  --ks-background-color-interface-interactive-disabled-base: var(--ks-color-fg-alpha-9-base);
  --ks-background-color-interface-interactive-hover-base: var(--ks-color-fg-alpha-7-base);
  --ks-background-color-interface-interactive-active-base: var(--ks-color-fg-alpha-9-base);
  --ks-background-color-interface-interactive-selected-base: var(--ks-color-primary-base);
  --ks-background-color-interface-inverted-base: var(--ks-color-fg-inverted-to-bg-8-base);
  --ks-background-color-interface-inverted-interactive-base: var(--ks-color-transparent-base);
  --ks-background-color-interface-inverted-interactive-disabled-base: var(--ks-color-fg-inverted-alpha-9-base);
  --ks-background-color-interface-inverted-interactive-hover-base: var(--ks-color-fg-inverted-alpha-7-base);
  --ks-background-color-interface-inverted-interactive-active-base: var(--ks-color-fg-inverted-alpha-9-base);
  --ks-background-color-interface-inverted-interactive-selected-base: var(--ks-color-primary-inverted-base);
  --ks-background-color-primary-base: var(--ks-color-primary-base);
  --ks-background-color-primary-interactive-base: var(--ks-color-primary-base);
  --ks-background-color-primary-interactive-hover-base: var(--ks-color-primary-to-bg-3-base);
  --ks-background-color-primary-interactive-active-base: var(--ks-color-primary-to-bg-4-base);
  --ks-background-color-primary-interactive-selected-base: var(--ks-color-primary-base);
  --ks-background-color-primary-translucent-base: var(--ks-color-primary-alpha-2-base);
  --ks-background-color-primary-inverted-base: var(--ks-color-primary-inverted-base);
  --ks-background-color-primary-inverted-interactive-base: var(--ks-color-primary-inverted-base);
  --ks-background-color-primary-inverted-interactive-hover-base: var(--ks-color-primary-inverted-to-bg-3-base);
  --ks-background-color-primary-inverted-interactive-active-base: var(--ks-color-primary-inverted-to-bg-3-base);
  --ks-background-color-primary-inverted-interactive-selected-base: var(--ks-color-primary-inverted-base);
  --ks-background-color-primary-inverted-translucent-base: var(--ks-color-primary-inverted-alpha-2-base);
  --ks-border-color-accent-base: var(--ks-color-fg-to-bg-8-base);
  --ks-border-color-accent-inverted-base: var(--ks-color-fg-inverted-to-bg-8-base);
  --ks-border-color-clear-base: var(--ks-color-transparent-base);
  --ks-border-color-clear-interactive-base: var(--ks-color-transparent-base);
  --ks-border-color-clear-interactive-hover-base: var(--ks-color-primary-alpha-8-base);
  --ks-border-color-clear-interactive-active-base: var(--ks-color-primary-alpha-7-base);
  --ks-border-color-clear-interactive-selected-base: var(--ks-color-primary-alpha-6-base);
  --ks-border-color-clear-inverted-base: var(--ks-color-transparent-base);
  --ks-border-color-clear-inverted-interactive-base: var(--ks-color-transparent-base);
  --ks-border-color-clear-inverted-interactive-hover-base: var(--ks-color-primary-inverted-alpha-7-base);
  --ks-border-color-clear-inverted-interactive-active-base: var(--ks-color-primary-inverted-alpha-6-base);
  --ks-border-color-clear-inverted-interactive-selected-base: var(--ks-color-primary-inverted-alpha-5-base);
  --ks-border-color-default-base: var(--ks-color-fg-inverted-base);
  --ks-border-color-default-inverted-base: var(--ks-color-fg-alpha-3-base);
  --ks-border-color-interface-base: var(--ks-color-transparent-base);
  --ks-border-color-interface-interactive-base: var(--ks-color-fg-to-bg-8-base);
  --ks-border-color-interface-interactive-disabled-base: var(--ks-color-fg-alpha-9-base);
  --ks-border-color-interface-interactive-hover-base: var(--ks-color-fg-to-bg-5-base);
  --ks-border-color-interface-interactive-active-base: var(--ks-color-fg-to-bg-6-base);
  --ks-border-color-interface-interactive-selected-base: var(--ks-color-primary-base);
  --ks-border-color-interface-inverted-base: var(--ks-color-transparent-base);
  --ks-border-color-interface-inverted-interactive-base: var(--ks-color-fg-inverted-alpha-5-base);
  --ks-border-color-interface-inverted-interactive-disabled-base: var(--ks-color-fg-alpha-9-base);
  --ks-border-color-interface-inverted-interactive-hover-base: var(--ks-color-fg-inverted-to-bg-6-base);
  --ks-border-color-interface-inverted-interactive-active-base: var(--ks-color-fg-to-bg-7-base);
  --ks-border-color-interface-inverted-interactive-selected-base: var(--ks-color-primary-inverted-base);
  --ks-border-color-primary-base: var(--ks-color-primary-base);
  --ks-border-color-primary-interactive-base: var(--ks-color-primary-base);
  --ks-border-color-primary-interactive-hover-base: var(--ks-color-primary-to-bg-2-base);
  --ks-border-color-primary-interactive-active-base: var(--ks-color-primary-to-bg-3-base);
  --ks-border-color-primary-interactive-selected-base: var(--ks-color-primary-base);
  --ks-border-color-primary-translucent-base: var(--ks-color-primary-alpha-2-base);
  --ks-border-color-primary-inverted-base: var(--ks-color-primary-inverted-base);
  --ks-border-color-primary-inverted-interactive-base: var(--ks-color-primary-inverted-base);
  --ks-border-color-primary-inverted-interactive-hover-base: var(--ks-color-primary-inverted-to-bg-2-base);
  --ks-border-color-primary-inverted-interactive-active-base: var(--ks-color-primary-inverted-to-bg-3-base);
  --ks-border-color-primary-inverted-interactive-selected-base: var(--ks-color-primary-inverted-base);
  --ks-border-color-primary-inverted-translucent-base: var(--ks-color-primary-inverted-alpha-2-base);
  --ks-border-width-default: 1px;
  --ks-border-width-emphasized: 2px;
  --ks-border-radius-control: 2px;
  --ks-border-radius-card: 2px;
  --ks-border-radius-surface: 4px;
  --ks-border-radius-pill: 999px;
  --ks-border-radius-circle: 50%;
  --ks-box-shadow-opacity-control: 0.2;
  --ks-box-shadow-opacity-control-hover: 0.3;
  --ks-box-shadow-opacity-card: 0.2;
  --ks-box-shadow-opacity-card-hover: 0.3;
  --ks-box-shadow-opacity-surface: 0.1;
  --ks-box-shadow-opacity-surface-hover: 0.2;
  --ks-box-shadow-color-control: rgba(5,5,5,var(--ks-box-shadow-opacity-control));
  --ks-box-shadow-color-control-hover: rgba(5,5,5,var(--ks-box-shadow-opacity-control-hover));
  --ks-box-shadow-color-card: rgba(5,5,5,var(--ks-box-shadow-opacity-card));
  --ks-box-shadow-color-card-hover: rgba(5,5,5,var(--ks-box-shadow-opacity-card-hover));
  --ks-box-shadow-color-surface: rgba(5,5,5,var(--ks-box-shadow-opacity-surface));
  --ks-box-shadow-color-surface-hover: rgba(5,5,5,var(--ks-box-shadow-opacity-surface-hover));
  --ks-box-shadow-control: 0 1px 2.75px var(--ks-box-shadow-color-control);
  --ks-box-shadow-control-hover: 0 1px 5.5px var(--ks-box-shadow-color-control-hover);
  --ks-box-shadow-card: 0 1px 5.5px var(--ks-box-shadow-color-card);
  --ks-box-shadow-card-hover: 0 1px 11px var(--ks-box-shadow-color-card-hover);
  --ks-box-shadow-surface: 0 1px 11px var(--ks-box-shadow-color-surface);
  --ks-box-shadow-surface-hover: 0 1px 22px var(--ks-box-shadow-color-surface-hover);
  --ks-color-primary-base: #80e;
  --ks-color-primary-alpha-1-base: rgba(136,0,238,.95);
  --ks-color-primary-alpha-2-base: rgba(136,0,238,.87);
  --ks-color-primary-alpha-3-base: rgba(136,0,238,.76);
  --ks-color-primary-alpha-4-base: rgba(136,0,238,.63);
  --ks-color-primary-alpha-5-base: rgba(136,0,238,.5);
  --ks-color-primary-alpha-6-base: rgba(136,0,238,.37);
  --ks-color-primary-alpha-7-base: rgba(136,0,238,.24);
  --ks-color-primary-alpha-8-base: rgba(136,0,238,.13);
  --ks-color-primary-alpha-9-base: rgba(136,0,238,.05);
  --ks-color-primary-to-bg-1-base: #8e0def;
  --ks-color-primary-to-bg-2-base: #9721f0;
  --ks-color-primary-to-bg-3-base: #a53df2;
  --ks-color-primary-to-bg-4-base: #b45ef4;
  --ks-color-primary-to-bg-5-base: #c480f7;
  --ks-color-primary-to-bg-6-base: #d3a1f9;
  --ks-color-primary-to-bg-7-base: #e2c2fb;
  --ks-color-primary-to-bg-8-base: #f0defd;
  --ks-color-primary-to-bg-9-base: #f9f2fe;
  --ks-color-primary-inverted-base: #fff;
  --ks-color-primary-inverted-alpha-1-base: hsla(0,0%,100%,.95);
  --ks-color-primary-inverted-alpha-2-base: hsla(0,0%,100%,.87);
  --ks-color-primary-inverted-alpha-3-base: hsla(0,0%,100%,.76);
  --ks-color-primary-inverted-alpha-4-base: hsla(0,0%,100%,.63);
  --ks-color-primary-inverted-alpha-5-base: hsla(0,0%,100%,.5);
  --ks-color-primary-inverted-alpha-6-base: hsla(0,0%,100%,.37);
  --ks-color-primary-inverted-alpha-7-base: hsla(0,0%,100%,.24);
  --ks-color-primary-inverted-alpha-8-base: hsla(0,0%,100%,.13);
  --ks-color-primary-inverted-alpha-9-base: hsla(0,0%,100%,.05);
  --ks-color-primary-inverted-to-bg-1-base: #f3f3f3;
  --ks-color-primary-inverted-to-bg-2-base: #dfdfdf;
  --ks-color-primary-inverted-to-bg-3-base: #c3c3c3;
  --ks-color-primary-inverted-to-bg-4-base: #a3a3a3;
  --ks-color-primary-inverted-to-bg-5-base: #828282;
  --ks-color-primary-inverted-to-bg-6-base: #626262;
  --ks-color-primary-inverted-to-bg-7-base: #414141;
  --ks-color-primary-inverted-to-bg-8-base: #262626;
  --ks-color-primary-inverted-to-bg-9-base: #121212;
  --ks-color-fg-base: #050505;
  --ks-color-fg-alpha-1-base: rgba(5,5,5,.95);
  --ks-color-fg-alpha-2-base: rgba(5,5,5,.87);
  --ks-color-fg-alpha-3-base: rgba(5,5,5,.76);
  --ks-color-fg-alpha-4-base: rgba(5,5,5,.63);
  --ks-color-fg-alpha-5-base: rgba(5,5,5,.5);
  --ks-color-fg-alpha-6-base: rgba(5,5,5,.37);
  --ks-color-fg-alpha-7-base: rgba(5,5,5,.24);
  --ks-color-fg-alpha-8-base: rgba(5,5,5,.13);
  --ks-color-fg-alpha-9-base: rgba(5,5,5,.05);
  --ks-color-fg-to-bg-1-base: #121212;
  --ks-color-fg-to-bg-2-base: #262626;
  --ks-color-fg-to-bg-3-base: #414141;
  --ks-color-fg-to-bg-4-base: #626262;
  --ks-color-fg-to-bg-5-base: #828282;
  --ks-color-fg-to-bg-6-base: #a3a3a3;
  --ks-color-fg-to-bg-7-base: #c3c3c3;
  --ks-color-fg-to-bg-8-base: #dfdfdf;
  --ks-color-fg-to-bg-9-base: #f3f3f3;
  --ks-color-fg-inverted-base: #fff;
  --ks-color-fg-inverted-alpha-1-base: hsla(0,0%,100%,.95);
  --ks-color-fg-inverted-alpha-2-base: hsla(0,0%,100%,.87);
  --ks-color-fg-inverted-alpha-3-base: hsla(0,0%,100%,.76);
  --ks-color-fg-inverted-alpha-4-base: hsla(0,0%,100%,.63);
  --ks-color-fg-inverted-alpha-5-base: hsla(0,0%,100%,.5);
  --ks-color-fg-inverted-alpha-6-base: hsla(0,0%,100%,.37);
  --ks-color-fg-inverted-alpha-7-base: hsla(0,0%,100%,.24);
  --ks-color-fg-inverted-alpha-8-base: hsla(0,0%,100%,.13);
  --ks-color-fg-inverted-alpha-9-base: hsla(0,0%,100%,.05);
  --ks-color-fg-inverted-to-bg-1-base: #f3f3f3;
  --ks-color-fg-inverted-to-bg-2-base: #dfdfdf;
  --ks-color-fg-inverted-to-bg-3-base: #c3c3c3;
  --ks-color-fg-inverted-to-bg-4-base: #a3a3a3;
  --ks-color-fg-inverted-to-bg-5-base: #828282;
  --ks-color-fg-inverted-to-bg-6-base: #626262;
  --ks-color-fg-inverted-to-bg-7-base: #414141;
  --ks-color-fg-inverted-to-bg-8-base: #262626;
  --ks-color-fg-inverted-to-bg-9-base: #121212;
  --ks-color-link-base: #5d5dd5;
  --ks-color-link-inverted-base: #c6c6ff;
  --ks-color-transparent-base: rgba(0,0,0,0);
  --ks-color-notice-base: #f8932a;
  --ks-color-notice-alpha-1-base: rgba(248,147,42,.95);
  --ks-color-notice-alpha-2-base: rgba(248,147,42,.87);
  --ks-color-notice-alpha-3-base: rgba(248,147,42,.76);
  --ks-color-notice-alpha-4-base: rgba(248,147,42,.63);
  --ks-color-notice-alpha-5-base: rgba(248,147,42,.5);
  --ks-color-notice-alpha-6-base: rgba(248,147,42,.37);
  --ks-color-notice-alpha-7-base: rgba(248,147,42,.24);
  --ks-color-notice-alpha-8-base: rgba(248,147,42,.13);
  --ks-color-notice-alpha-9-base: rgba(248,147,42,.05);
  --ks-color-notice-to-bg-1-base: #f89835;
  --ks-color-notice-to-bg-2-base: #f9a146;
  --ks-color-notice-to-bg-3-base: #faad5d;
  --ks-color-notice-to-bg-4-base: #fbbb79;
  --ks-color-notice-to-bg-5-base: #fcc995;
  --ks-color-notice-to-bg-6-base: #fcd7b0;
  --ks-color-notice-to-bg-7-base: #fde5cc;
  --ks-color-notice-to-bg-8-base: #fef1e3;
  --ks-color-notice-to-bg-9-base: #fffaf4;
  --ks-color-notice-inverted-base: #ff5d53;
  --ks-color-notice-inverted-alpha-1-base: rgba(255,93,83,.95);
  --ks-color-notice-inverted-alpha-2-base: rgba(255,93,83,.87);
  --ks-color-notice-inverted-alpha-3-base: rgba(255,93,83,.76);
  --ks-color-notice-inverted-alpha-4-base: rgba(255,93,83,.63);
  --ks-color-notice-inverted-alpha-5-base: rgba(255,93,83,.5);
  --ks-color-notice-inverted-alpha-6-base: rgba(255,93,83,.37);
  --ks-color-notice-inverted-alpha-7-base: rgba(255,93,83,.24);
  --ks-color-notice-inverted-alpha-8-base: rgba(255,93,83,.13);
  --ks-color-notice-inverted-alpha-9-base: rgba(255,93,83,.05);
  --ks-color-notice-inverted-to-bg-1-base: #f3594f;
  --ks-color-notice-inverted-to-bg-2-base: #df5249;
  --ks-color-notice-inverted-to-bg-3-base: #c34840;
  --ks-color-notice-inverted-to-bg-4-base: #a33c36;
  --ks-color-notice-inverted-to-bg-5-base: #82312c;
  --ks-color-notice-inverted-to-bg-6-base: #622622;
  --ks-color-notice-inverted-to-bg-7-base: #411a18;
  --ks-color-notice-inverted-to-bg-8-base: #26100f;
  --ks-color-notice-inverted-to-bg-9-base: #120909;
  --ks-color-positive-base: #6edb64;
  --ks-color-positive-alpha-1-base: rgba(110,219,100,.95);
  --ks-color-positive-alpha-2-base: rgba(110,219,100,.87);
  --ks-color-positive-alpha-3-base: rgba(110,219,100,.76);
  --ks-color-positive-alpha-4-base: rgba(110,219,100,.63);
  --ks-color-positive-alpha-5-base: rgba(110,219,100,.5);
  --ks-color-positive-alpha-6-base: rgba(110,219,100,.37);
  --ks-color-positive-alpha-7-base: rgba(110,219,100,.24);
  --ks-color-positive-alpha-8-base: rgba(110,219,100,.13);
  --ks-color-positive-alpha-9-base: rgba(110,219,100,.05);
  --ks-color-positive-to-bg-1-base: #75dd6c;
  --ks-color-positive-to-bg-2-base: #81e078;
  --ks-color-positive-to-bg-3-base: #91e489;
  --ks-color-positive-to-bg-4-base: #a4e89d;
  --ks-color-positive-to-bg-5-base: #b7edb2;
  --ks-color-positive-to-bg-6-base: #c9f2c6;
  --ks-color-positive-to-bg-7-base: #dcf6da;
  --ks-color-positive-to-bg-8-base: #ecfaeb;
  --ks-color-positive-to-bg-9-base: #f8fdf7;
  --ks-color-positive-inverted-base: #23831b;
  --ks-color-positive-inverted-alpha-1-base: rgba(35,131,27,.95);
  --ks-color-positive-inverted-alpha-2-base: rgba(35,131,27,.87);
  --ks-color-positive-inverted-alpha-3-base: rgba(35,131,27,.76);
  --ks-color-positive-inverted-alpha-4-base: rgba(35,131,27,.63);
  --ks-color-positive-inverted-alpha-5-base: rgba(35,131,27,.5);
  --ks-color-positive-inverted-alpha-6-base: rgba(35,131,27,.37);
  --ks-color-positive-inverted-alpha-7-base: rgba(35,131,27,.24);
  --ks-color-positive-inverted-alpha-8-base: rgba(35,131,27,.13);
  --ks-color-positive-inverted-alpha-9-base: rgba(35,131,27,.05);
  --ks-color-positive-inverted-to-bg-1-base: #227d1a;
  --ks-color-positive-inverted-to-bg-2-base: #1f7318;
  --ks-color-positive-inverted-to-bg-3-base: #1c6516;
  --ks-color-positive-inverted-to-bg-4-base: #185413;
  --ks-color-positive-inverted-to-bg-5-base: #144410;
  --ks-color-positive-inverted-to-bg-6-base: #10340d;
  --ks-color-positive-inverted-to-bg-7-base: #0c230a;
  --ks-color-positive-inverted-to-bg-8-base: #091508;
  --ks-color-positive-inverted-to-bg-9-base: #070b06;
  --ks-color-informative-base: #0076af;
  --ks-color-informative-alpha-1-base: rgba(0,118,175,.95);
  --ks-color-informative-alpha-2-base: rgba(0,118,175,.87);
  --ks-color-informative-alpha-3-base: rgba(0,118,175,.76);
  --ks-color-informative-alpha-4-base: rgba(0,118,175,.63);
  --ks-color-informative-alpha-5-base: rgba(0,118,175,.5);
  --ks-color-informative-alpha-6-base: rgba(0,118,175,.37);
  --ks-color-informative-alpha-7-base: rgba(0,118,175,.24);
  --ks-color-informative-alpha-8-base: rgba(0,118,175,.13);
  --ks-color-informative-alpha-9-base: rgba(0,118,175,.05);
  --ks-color-informative-to-bg-1-base: #0d7db3;
  --ks-color-informative-to-bg-2-base: #2188b9;
  --ks-color-informative-to-bg-3-base: #3d97c2;
  --ks-color-informative-to-bg-4-base: #5ea9cd;
  --ks-color-informative-to-bg-5-base: #80bbd7;
  --ks-color-informative-to-bg-6-base: #a1cce1;
  --ks-color-informative-to-bg-7-base: #c2deec;
  --ks-color-informative-to-bg-8-base: #deedf5;
  --ks-color-informative-to-bg-9-base: #f2f8fb;
  --ks-color-informative-inverted-base: #00718f;
  --ks-color-informative-inverted-alpha-1-base: rgba(0,113,143,.95);
  --ks-color-informative-inverted-alpha-2-base: rgba(0,113,143,.87);
  --ks-color-informative-inverted-alpha-3-base: rgba(0,113,143,.76);
  --ks-color-informative-inverted-alpha-4-base: rgba(0,113,143,.63);
  --ks-color-informative-inverted-alpha-5-base: rgba(0,113,143,.5);
  --ks-color-informative-inverted-alpha-6-base: rgba(0,113,143,.37);
  --ks-color-informative-inverted-alpha-7-base: rgba(0,113,143,.24);
  --ks-color-informative-inverted-alpha-8-base: rgba(0,113,143,.13);
  --ks-color-informative-inverted-alpha-9-base: rgba(0,113,143,.05);
  --ks-color-informative-inverted-to-bg-1-base: #006c88;
  --ks-color-informative-inverted-to-bg-2-base: #01637d;
  --ks-color-informative-inverted-to-bg-3-base: #01576e;
  --ks-color-informative-inverted-to-bg-4-base: #02495c;
  --ks-color-informative-inverted-to-bg-5-base: #033b4a;
  --ks-color-informative-inverted-to-bg-6-base: #032d38;
  --ks-color-informative-inverted-to-bg-7-base: #041f26;
  --ks-color-informative-inverted-to-bg-8-base: #041317;
  --ks-color-informative-inverted-to-bg-9-base: #050a0c;
  --ks-color-negative-base: #ff001f;
  --ks-color-negative-alpha-1-base: rgba(255,0,31,.95);
  --ks-color-negative-alpha-2-base: rgba(255,0,31,.87);
  --ks-color-negative-alpha-3-base: rgba(255,0,31,.76);
  --ks-color-negative-alpha-4-base: rgba(255,0,31,.63);
  --ks-color-negative-alpha-5-base: rgba(255,0,31,.5);
  --ks-color-negative-alpha-6-base: rgba(255,0,31,.37);
  --ks-color-negative-alpha-7-base: rgba(255,0,31,.24);
  --ks-color-negative-alpha-8-base: rgba(255,0,31,.13);
  --ks-color-negative-alpha-9-base: rgba(255,0,31,.05);
  --ks-color-negative-to-bg-1-base: #ff0d2a;
  --ks-color-negative-to-bg-2-base: #ff213c;
  --ks-color-negative-to-bg-3-base: #ff3d55;
  --ks-color-negative-to-bg-4-base: #ff5e72;
  --ks-color-negative-to-bg-5-base: #ff808f;
  --ks-color-negative-to-bg-6-base: #ffa1ac;
  --ks-color-negative-to-bg-7-base: #ffc2c9;
  --ks-color-negative-to-bg-8-base: #ffdee2;
  --ks-color-negative-to-bg-9-base: #fff2f4;
  --ks-color-negative-inverted-base: #d21d48;
  --ks-color-negative-inverted-alpha-1-base: rgba(210,29,72,.95);
  --ks-color-negative-inverted-alpha-2-base: rgba(210,29,72,.87);
  --ks-color-negative-inverted-alpha-3-base: rgba(210,29,72,.76);
  --ks-color-negative-inverted-alpha-4-base: rgba(210,29,72,.63);
  --ks-color-negative-inverted-alpha-5-base: rgba(210,29,72,.5);
  --ks-color-negative-inverted-alpha-6-base: rgba(210,29,72,.37);
  --ks-color-negative-inverted-alpha-7-base: rgba(210,29,72,.24);
  --ks-color-negative-inverted-alpha-8-base: rgba(210,29,72,.13);
  --ks-color-negative-inverted-alpha-9-base: rgba(210,29,72,.05);
  --ks-color-negative-inverted-to-bg-1-base: #c81c45;
  --ks-color-negative-inverted-to-bg-2-base: #b71a3f;
  --ks-color-negative-inverted-to-bg-3-base: #a11738;
  --ks-color-negative-inverted-to-bg-4-base: #86142f;
  --ks-color-negative-inverted-to-bg-5-base: #6c1127;
  --ks-color-negative-inverted-to-bg-6-base: #510e1e;
  --ks-color-negative-inverted-to-bg-7-base: #360b15;
  --ks-color-negative-inverted-to-bg-8-base: #20080e;
  --ks-color-negative-inverted-to-bg-9-base: #0f0608;
  --ks-depth-modal: 1000;
  --ks-spacing-xxs: calc(var(--ks-spacing-xxs-base) * var(--ks-spacing-xxs-bp-factor, 1));
  --ks-spacing-xxs-base: 0.125rem;
  --ks-spacing-xxs-bp-factor-phone: 1;
  --ks-spacing-xxs-bp-factor-tablet: 1;
  --ks-spacing-xxs-bp-factor-laptop: 1;
  --ks-spacing-xxs-bp-factor-desktop: 1.25;
  --ks-spacing-xs: calc(var(--ks-spacing-xs-base) * var(--ks-spacing-xs-bp-factor, 1));
  --ks-spacing-xs-base: 0.25rem;
  --ks-spacing-xs-bp-factor-phone: 1;
  --ks-spacing-xs-bp-factor-tablet: 1.35;
  --ks-spacing-xs-bp-factor-laptop: 1.5;
  --ks-spacing-xs-bp-factor-desktop: 1.75;
  --ks-spacing-s: calc(var(--ks-spacing-s-base) * var(--ks-spacing-s-bp-factor, 1));
  --ks-spacing-s-base: 0.375rem;
  --ks-spacing-s-bp-factor-phone: 1;
  --ks-spacing-s-bp-factor-tablet: 1.3333333;
  --ks-spacing-s-bp-factor-laptop: 1.6666666;
  --ks-spacing-s-bp-factor-desktop: 1.6666666;
  --ks-spacing-m: calc(var(--ks-spacing-m-base) * var(--ks-spacing-m-bp-factor, 1));
  --ks-spacing-m-base: 0.625rem;
  --ks-spacing-m-bp-factor-phone: 1;
  --ks-spacing-m-bp-factor-tablet: 1.5;
  --ks-spacing-m-bp-factor-laptop: 1.75;
  --ks-spacing-m-bp-factor-desktop: 2;
  --ks-spacing-l: calc(var(--ks-spacing-l-base) * var(--ks-spacing-l-bp-factor, 1));
  --ks-spacing-l-base: 1.25rem;
  --ks-spacing-l-bp-factor-phone: 1;
  --ks-spacing-l-bp-factor-tablet: 1.5;
  --ks-spacing-l-bp-factor-laptop: 1.75;
  --ks-spacing-l-bp-factor-desktop: 2;
  --ks-spacing-xl: calc(var(--ks-spacing-xl-base) * var(--ks-spacing-xl-bp-factor, 1));
  --ks-spacing-xl-base: 1.875rem;
  --ks-spacing-xl-bp-factor-phone: 1;
  --ks-spacing-xl-bp-factor-tablet: 1.5;
  --ks-spacing-xl-bp-factor-laptop: 1.75;
  --ks-spacing-xl-bp-factor-desktop: 2;
  --ks-spacing-xxl: calc(var(--ks-spacing-xxl-base) * var(--ks-spacing-xxl-bp-factor, 1));
  --ks-spacing-xxl-base: 2.5rem;
  --ks-spacing-xxl-bp-factor-phone: 1;
  --ks-spacing-xxl-bp-factor-tablet: 1.5;
  --ks-spacing-xxl-bp-factor-laptop: 1.75;
  --ks-spacing-xxl-bp-factor-desktop: 2;
  --ks-spacing-stack-xs: var(--ks-spacing-xs);
  --ks-spacing-stack-s: var(--ks-spacing-s);
  --ks-spacing-stack-m: var(--ks-spacing-m);
  --ks-spacing-stack-l: var(--ks-spacing-l);
  --ks-spacing-stack-xl: var(--ks-spacing-xl);
  --ks-spacing-inline-xs: var(--ks-spacing-xs);
  --ks-spacing-inline-s: var(--ks-spacing-s);
  --ks-spacing-inline-m: var(--ks-spacing-m);
  --ks-spacing-inline-l: var(--ks-spacing-l);
  --ks-spacing-inline-xl: var(--ks-spacing-xl);
  --ks-spacing-inset-xs: var(--ks-spacing-xs);
  --ks-spacing-inset-s: var(--ks-spacing-s);
  --ks-spacing-inset-m: var(--ks-spacing-m);
  --ks-spacing-inset-l: var(--ks-spacing-l);
  --ks-spacing-inset-xl: var(--ks-spacing-xl);
  --ks-spacing-inset-squish-xs: var(--ks-spacing-xxs) var(--ks-spacing-xs);
  --ks-spacing-inset-squish-s: var(--ks-spacing-xs) var(--ks-spacing-s);
  --ks-spacing-inset-squish-m: var(--ks-spacing-s) var(--ks-spacing-m);
  --ks-spacing-inset-squish-l: var(--ks-spacing-m) var(--ks-spacing-l);
  --ks-spacing-inset-squish-xl: var(--ks-spacing-l) var(--ks-spacing-xl);
  --ks-spacing-inset-stretch-xs: var(--ks-spacing-s) var(--ks-spacing-xs);
  --ks-spacing-inset-stretch-s: var(--ks-spacing-m) var(--ks-spacing-s);
  --ks-spacing-inset-stretch-m: var(--ks-spacing-l) var(--ks-spacing-m);
  --ks-spacing-inset-stretch-l: var(--ks-spacing-xl) var(--ks-spacing-l);
  --ks-spacing-inset-stretch-xl: var(--ks-spacing-xxl) var(--ks-spacing-xl);
  --ks-text-color-default-base: var(--ks-color-fg-base);
  --ks-text-color-default-interactive-base: var(--ks-color-link-base);
  --ks-text-color-default-interactive-hover-base: var(--ks-color-link-base);
  --ks-text-color-default-interactive-active-base: var(--ks-color-link-base);
  --ks-text-color-default-interactive-visited-base: var(--ks-color-link-base);
  --ks-text-color-default-inverted-base: var(--ks-color-fg-inverted-base);
  --ks-text-color-default-inverted-interactive-base: var(--ks-color-link-inverted-base);
  --ks-text-color-default-inverted-interactive-hover-base: var(--ks-color-link-inverted-base);
  --ks-text-color-default-inverted-interactive-active-base: var(--ks-color-link-inverted-base);
  --ks-text-color-default-inverted-interactive-visited-base: var(--ks-color-link-inverted-base);
  --ks-text-color-interface-base: var(--ks-color-fg-to-bg-2-base);
  --ks-text-color-interface-interactive-base: var(--ks-color-fg-base);
  --ks-text-color-interface-interactive-hover-base: var(--ks-color-fg-base);
  --ks-text-color-interface-interactive-active-base: var(--ks-color-fg-base);
  --ks-text-color-interface-interactive-visited-base: var(--ks-color-fg-base);
  --ks-text-color-interface-inverted-base: var(--ks-color-fg-inverted-to-bg-2-base);
  --ks-text-color-interface-inverted-interactive-base: var(--ks-color-fg-inverted-base);
  --ks-text-color-interface-inverted-interactive-hover-base: var(--ks-color-fg-inverted-base);
  --ks-text-color-interface-inverted-interactive-active-base: var(--ks-color-fg-inverted-base);
  --ks-text-color-interface-inverted-interactive-visited-base: var(--ks-color-fg-inverted-base);
  --ks-text-color-primary-base: var(--ks-color-primary-base);
  --ks-text-color-primary-interactive-base: var(--ks-color-primary-alpha-2-base);
  --ks-text-color-primary-interactive-hover-base: var(--ks-color-primary-alpha-2-base);
  --ks-text-color-primary-interactive-active-base: var(--ks-color-primary-alpha-2-base);
  --ks-text-color-primary-interactive-visited-base: var(--ks-color-primary-alpha-2-base);
  --ks-text-color-primary-inverted-base: var(--ks-color-primary-inverted-base);
  --ks-text-color-primary-inverted-interactive-base: var(--ks-color-primary-inverted-alpha-2-base);
  --ks-text-color-primary-inverted-interactive-hover-base: var(--ks-color-primary-inverted-alpha-2-base);
  --ks-text-color-primary-inverted-interactive-active-base: var(--ks-color-primary-inverted-alpha-2-base);
  --ks-text-color-primary-inverted-interactive-visited-base: var(--ks-color-primary-inverted-alpha-2-base);
  --ks-duration-immediate: 50ms;
  --ks-duration-fast: 100ms;
  --ks-duration-medium: 150ms;
  --ks-duration-slow: 300ms;
  --ks-timing-function-bounce: cubic-bezier(0.17,1,0.5,1.5);
  --ks-timing-function-ease-out: ease-out;
  --ks-timing-function-ease-in: ease-in;
  --ks-timing-function-ease-in-out: ease-in-out;
  --ks-timing-function-linear: linear;
  --ks-transition-collapse: var(--ks-duration-slow) var(--ks-timing-function-ease-out);
  --ks-transition-hover: var(--ks-duration-fast) var(--ks-timing-function-ease-in-out);
  --ks-transition-fade: var(--ks-duration-slow) var(--ks-timing-function-ease-out);
  --ks-font-family-display: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  --ks-font-family-copy: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  --ks-font-family-interface: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  --ks-font-family-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --ks-font-weight-light: 300;
  --ks-font-weight-regular: 400;
  --ks-font-weight-semi-bold: 600;
  --ks-font-weight-bold: 700;
  --ks-font-size-display-bp-factor-phone: 1;
  --ks-font-size-display-bp-factor-tablet: 1.375;
  --ks-font-size-display-xxs-base: 0.4064rem;
  --ks-font-size-display-xs-base: 0.5487rem;
  --ks-font-size-display-s-base: 0.7407rem;
  --ks-font-size-display-m-base: 1rem;
  --ks-font-size-display-l-base: 1.35rem;
  --ks-font-size-display-xl-base: 1.8225rem;
  --ks-font-size-display-xxl-base: 2.4604rem;
  --ks-font-size-copy-bp-factor-tablet: 1.14285;
  --ks-font-size-copy-xxs-base: 0.512rem;
  --ks-font-size-copy-xs-base: 0.64rem;
  --ks-font-size-copy-s-base: 0.8rem;
  --ks-font-size-copy-m-base: 0.875rem;
  --ks-font-size-copy-l-base: 1.25rem;
  --ks-font-size-copy-xl-base: 1.5625rem;
  --ks-font-size-copy-xxl-base: 1.9531rem;
  --ks-font-size-interface-bp-factor-tablet: 1;
  --ks-font-size-interface-xxs-base: 0.544rem;
  --ks-font-size-interface-xs-base: 0.6664rem;
  --ks-font-size-interface-s-base: 0.75rem;
  --ks-font-size-interface-m-base: 0.875rem;
  --ks-font-size-interface-l-base: 1rem;
  --ks-font-size-interface-xl-base: 1.3125rem;
  --ks-font-size-interface-xxl-base: 1.75rem;
  --ks-font-size-mono-bp-factor-tablet: 1.125;
  --ks-font-size-mono-xxs-base: 0.544rem;
  --ks-font-size-mono-xs-base: 0.6664rem;
  --ks-font-size-mono-s-base: 0.8163rem;
  --ks-font-size-mono-m-base: 1rem;
  --ks-font-size-mono-l-base: 1.225rem;
  --ks-font-size-mono-xl-base: 1.5006rem;
  --ks-font-size-mono-xxl-base: 1.8383rem;
  --ks-line-height-display-xxs: 1.5;
  --ks-line-height-display-xs: 1.5;
  --ks-line-height-display-s: 1.5;
  --ks-line-height-display-m: 1.5;
  --ks-line-height-display-l: 1.5;
  --ks-line-height-display-xl: 1.5;
  --ks-line-height-display-xxl: 1.5;
  --ks-line-height-copy-xxs: 1.5;
  --ks-line-height-copy-xs: 1.5;
  --ks-line-height-copy-s: 1.5;
  --ks-line-height-copy-m: 1.5;
  --ks-line-height-copy-l: 1.5;
  --ks-line-height-copy-xl: 1.5;
  --ks-line-height-copy-xxl: 1.5;
  --ks-line-height-interface-xxs: 1.45;
  --ks-line-height-interface-xs: 1.45;
  --ks-line-height-interface-s: 1.45;
  --ks-line-height-interface-m: 1.45;
  --ks-line-height-interface-l: 1.45;
  --ks-line-height-interface-xl: 1.35;
  --ks-line-height-interface-xxl: 1.25;
  --ks-line-height-mono-xxs: 1.5;
  --ks-line-height-mono-xs: 1.5;
  --ks-line-height-mono-s: 1.5;
  --ks-line-height-mono-m: 1.5;
  --ks-line-height-mono-l: 1.5;
  --ks-line-height-mono-xl: 1.5;
  --ks-line-height-mono-xxl: 1.5;
  --g-header-height: 0px;
  --g-scroll-offset: var(--g-header-height);
  --ks-font-size-display-xxs: calc(var(--ks-font-size-display-xxs-base) * var(--ks-font-size-display-bp-factor, 1));
  --ks-font-display-xxs: var(--ks-font-size-display-xxs) / var(--ks-line-height-display-xxs) var(--ks-font-family-display);
  --ks-font-size-display-xs: calc(var(--ks-font-size-display-xs-base) * var(--ks-font-size-display-bp-factor, 1));
  --ks-font-display-xs: var(--ks-font-size-display-xs) / var(--ks-line-height-display-xs) var(--ks-font-family-display);
  --ks-font-size-display-s: calc(var(--ks-font-size-display-s-base) * var(--ks-font-size-display-bp-factor, 1));
  --ks-font-display-s: var(--ks-font-size-display-s) / var(--ks-line-height-display-s) var(--ks-font-family-display);
  --ks-font-size-display-m: calc(var(--ks-font-size-display-m-base) * var(--ks-font-size-display-bp-factor, 1));
  --ks-font-display-m: var(--ks-font-size-display-m) / var(--ks-line-height-display-m) var(--ks-font-family-display);
  --ks-font-size-display-l: calc(var(--ks-font-size-display-l-base) * var(--ks-font-size-display-bp-factor, 1));
  --ks-font-display-l: var(--ks-font-size-display-l) / var(--ks-line-height-display-l) var(--ks-font-family-display);
  --ks-font-size-display-xl: calc(var(--ks-font-size-display-xl-base) * var(--ks-font-size-display-bp-factor, 1));
  --ks-font-display-xl: var(--ks-font-size-display-xl) / var(--ks-line-height-display-xl) var(--ks-font-family-display);
  --ks-font-size-display-xxl: calc(var(--ks-font-size-display-xxl-base) * var(--ks-font-size-display-bp-factor, 1));
  --ks-font-display-xxl: var(--ks-font-size-display-xxl) / var(--ks-line-height-display-xxl) var(--ks-font-family-display);
  --ks-font-size-copy-xxs: calc(var(--ks-font-size-copy-xxs-base) * var(--ks-font-size-copy-bp-factor, 1));
  --ks-font-copy-xxs: var(--ks-font-size-copy-xxs) / var(--ks-line-height-copy-xxs) var(--ks-font-family-copy);
  --ks-font-size-copy-xs: calc(var(--ks-font-size-copy-xs-base) * var(--ks-font-size-copy-bp-factor, 1));
  --ks-font-copy-xs: var(--ks-font-size-copy-xs) / var(--ks-line-height-copy-xs) var(--ks-font-family-copy);
  --ks-font-size-copy-s: calc(var(--ks-font-size-copy-s-base) * var(--ks-font-size-copy-bp-factor, 1));
  --ks-font-copy-s: var(--ks-font-size-copy-s) / var(--ks-line-height-copy-s) var(--ks-font-family-copy);
  --ks-font-size-copy-m: calc(var(--ks-font-size-copy-m-base) * var(--ks-font-size-copy-bp-factor, 1));
  --ks-font-copy-m: var(--ks-font-size-copy-m) / var(--ks-line-height-copy-m) var(--ks-font-family-copy);
  --ks-font-size-copy-l: calc(var(--ks-font-size-copy-l-base) * var(--ks-font-size-copy-bp-factor, 1));
  --ks-font-copy-l: var(--ks-font-size-copy-l) / var(--ks-line-height-copy-l) var(--ks-font-family-copy);
  --ks-font-size-copy-xl: calc(var(--ks-font-size-copy-xl-base) * var(--ks-font-size-copy-bp-factor, 1));
  --ks-font-copy-xl: var(--ks-font-size-copy-xl) / var(--ks-line-height-copy-xl) var(--ks-font-family-copy);
  --ks-font-size-copy-xxl: calc(var(--ks-font-size-copy-xxl-base) * var(--ks-font-size-copy-bp-factor, 1));
  --ks-font-copy-xxl: var(--ks-font-size-copy-xxl) / var(--ks-line-height-copy-xxl) var(--ks-font-family-copy);
  --ks-font-size-interface-xxs: calc(var(--ks-font-size-interface-xxs-base) * var(--ks-font-size-interface-bp-factor, 1));
  --ks-font-interface-xxs: var(--ks-font-size-interface-xxs) / var(--ks-line-height-interface-xxs) var(--ks-font-family-interface);
  --ks-font-size-interface-xs: calc(var(--ks-font-size-interface-xs-base) * var(--ks-font-size-interface-bp-factor, 1));
  --ks-font-interface-xs: var(--ks-font-size-interface-xs) / var(--ks-line-height-interface-xs) var(--ks-font-family-interface);
  --ks-font-size-interface-s: calc(var(--ks-font-size-interface-s-base) * var(--ks-font-size-interface-bp-factor, 1));
  --ks-font-interface-s: var(--ks-font-size-interface-s) / var(--ks-line-height-interface-s) var(--ks-font-family-interface);
  --ks-font-size-interface-m: calc(var(--ks-font-size-interface-m-base) * var(--ks-font-size-interface-bp-factor, 1));
  --ks-font-interface-m: var(--ks-font-size-interface-m) / var(--ks-line-height-interface-m) var(--ks-font-family-interface);
  --ks-font-size-interface-l: calc(var(--ks-font-size-interface-l-base) * var(--ks-font-size-interface-bp-factor, 1));
  --ks-font-interface-l: var(--ks-font-size-interface-l) / var(--ks-line-height-interface-l) var(--ks-font-family-interface);
  --ks-font-size-interface-xl: calc(var(--ks-font-size-interface-xl-base) * var(--ks-font-size-interface-bp-factor, 1));
  --ks-font-interface-xl: var(--ks-font-size-interface-xl) / var(--ks-line-height-interface-xl) var(--ks-font-family-interface);
  --ks-font-size-interface-xxl: calc(var(--ks-font-size-interface-xxl-base) * var(--ks-font-size-interface-bp-factor, 1));
  --ks-font-interface-xxl: var(--ks-font-size-interface-xxl) / var(--ks-line-height-interface-xxl) var(--ks-font-family-interface);
  --ks-font-size-mono-xxs: calc(var(--ks-font-size-mono-xxs-base) * var(--ks-font-size-mono-bp-factor, 1));
  --ks-font-mono-xxs: var(--ks-font-size-mono-xxs) / var(--ks-line-height-mono-xxs) var(--ks-font-family-mono);
  --ks-font-size-mono-xs: calc(var(--ks-font-size-mono-xs-base) * var(--ks-font-size-mono-bp-factor, 1));
  --ks-font-mono-xs: var(--ks-font-size-mono-xs) / var(--ks-line-height-mono-xs) var(--ks-font-family-mono);
  --ks-font-size-mono-s: calc(var(--ks-font-size-mono-s-base) * var(--ks-font-size-mono-bp-factor, 1));
  --ks-font-mono-s: var(--ks-font-size-mono-s) / var(--ks-line-height-mono-s) var(--ks-font-family-mono);
  --ks-font-size-mono-m: calc(var(--ks-font-size-mono-m-base) * var(--ks-font-size-mono-bp-factor, 1));
  --ks-font-mono-m: var(--ks-font-size-mono-m) / var(--ks-line-height-mono-m) var(--ks-font-family-mono);
  --ks-font-size-mono-l: calc(var(--ks-font-size-mono-l-base) * var(--ks-font-size-mono-bp-factor, 1));
  --ks-font-mono-l: var(--ks-font-size-mono-l) / var(--ks-line-height-mono-l) var(--ks-font-family-mono);
  --ks-font-size-mono-xl: calc(var(--ks-font-size-mono-xl-base) * var(--ks-font-size-mono-bp-factor, 1));
  --ks-font-mono-xl: var(--ks-font-size-mono-xl) / var(--ks-line-height-mono-xl) var(--ks-font-family-mono);
  --ks-font-size-mono-xxl: calc(var(--ks-font-size-mono-xxl-base) * var(--ks-font-size-mono-bp-factor, 1));
  --ks-font-mono-xxl: var(--ks-font-size-mono-xxl) / var(--ks-line-height-mono-xxl) var(--ks-font-family-mono);
  --ks-spacing-stack: calc(var(--ks-spacing-stack-base) * var(--ks-spacing-stack-bp-factor, 1));
  --ks-spacing-inline: calc(var(--ks-spacing-inline-base) * var(--ks-spacing-inline-bp-factor, 1));
  --ks-spacing-inset: calc(var(--ks-spacing-inset-base) * var(--ks-spacing-inset-bp-factor, 1));
  --ks-spacing-inset-squish: calc(var(--ks-spacing-inset-squish-base) * var(--ks-spacing-inset-squish-bp-factor, 1));
  --ks-spacing-inset-stretch: calc(var(--ks-spacing-inset-stretch-base) * var(--ks-spacing-inset-stretch-bp-factor, 1));
  --ks-breakpoints: '{"phone":"36em","tablet":"48em","laptop":"62em","desktop":"75em"}';
}

:root, [ks-theme], [ks-inverted=false] {
  --ks-background-color-accent: var(--ks-background-color-accent-base);
  --ks-background-color-accent-inverted: var(--ks-background-color-accent-inverted-base);
  --ks-background-color-clear: var(--ks-background-color-clear-base);
  --ks-background-color-clear-interactive: var(--ks-background-color-clear-interactive-base);
  --ks-background-color-clear-interactive-hover: var(--ks-background-color-clear-interactive-hover-base);
  --ks-background-color-clear-interactive-active: var(--ks-background-color-clear-interactive-active-base);
  --ks-background-color-clear-interactive-selected: var(--ks-background-color-clear-interactive-selected-base);
  --ks-background-color-clear-inverted: var(--ks-background-color-clear-inverted-base);
  --ks-background-color-clear-inverted-interactive: var(--ks-background-color-clear-inverted-interactive-base);
  --ks-background-color-clear-inverted-interactive-hover: var(--ks-background-color-clear-inverted-interactive-hover-base);
  --ks-background-color-clear-inverted-interactive-active: var(--ks-background-color-clear-inverted-interactive-active-base);
  --ks-background-color-clear-inverted-interactive-selected: var(--ks-background-color-clear-inverted-interactive-selected-base);
  --ks-background-color-default: var(--ks-background-color-default-base);
  --ks-background-color-default-inverted: var(--ks-background-color-default-inverted-base);
  --ks-background-color-interface: var(--ks-background-color-interface-base);
  --ks-background-color-interface-interactive: var(--ks-background-color-interface-interactive-base);
  --ks-background-color-interface-interactive-disabled: var(--ks-background-color-interface-interactive-disabled-base);
  --ks-background-color-interface-interactive-hover: var(--ks-background-color-interface-interactive-hover-base);
  --ks-background-color-interface-interactive-active: var(--ks-background-color-interface-interactive-active-base);
  --ks-background-color-interface-interactive-selected: var(--ks-background-color-interface-interactive-selected-base);
  --ks-background-color-interface-inverted: var(--ks-background-color-interface-inverted-base);
  --ks-background-color-interface-inverted-interactive: var(--ks-background-color-interface-inverted-interactive-base);
  --ks-background-color-interface-inverted-interactive-disabled: var(--ks-background-color-interface-inverted-interactive-disabled-base);
  --ks-background-color-interface-inverted-interactive-hover: var(--ks-background-color-interface-inverted-interactive-hover-base);
  --ks-background-color-interface-inverted-interactive-active: var(--ks-background-color-interface-inverted-interactive-active-base);
  --ks-background-color-interface-inverted-interactive-selected: var(--ks-background-color-interface-inverted-interactive-selected-base);
  --ks-background-color-primary: var(--ks-background-color-primary-base);
  --ks-background-color-primary-interactive: var(--ks-background-color-primary-interactive-base);
  --ks-background-color-primary-interactive-hover: var(--ks-background-color-primary-interactive-hover-base);
  --ks-background-color-primary-interactive-active: var(--ks-background-color-primary-interactive-active-base);
  --ks-background-color-primary-interactive-selected: var(--ks-background-color-primary-interactive-selected-base);
  --ks-background-color-primary-translucent: var(--ks-background-color-primary-translucent-base);
  --ks-background-color-primary-inverted: var(--ks-background-color-primary-inverted-base);
  --ks-background-color-primary-inverted-interactive: var(--ks-background-color-primary-inverted-interactive-base);
  --ks-background-color-primary-inverted-interactive-hover: var(--ks-background-color-primary-inverted-interactive-hover-base);
  --ks-background-color-primary-inverted-interactive-active: var(--ks-background-color-primary-inverted-interactive-active-base);
  --ks-background-color-primary-inverted-interactive-selected: var(--ks-background-color-primary-inverted-interactive-selected-base);
  --ks-background-color-primary-inverted-translucent: var(--ks-background-color-primary-inverted-translucent-base);
  --ks-border-color-accent: var(--ks-border-color-accent-base);
  --ks-border-color-accent-inverted: var(--ks-border-color-accent-inverted-base);
  --ks-border-color-clear: var(--ks-border-color-clear-base);
  --ks-border-color-clear-interactive: var(--ks-border-color-clear-interactive-base);
  --ks-border-color-clear-interactive-hover: var(--ks-border-color-clear-interactive-hover-base);
  --ks-border-color-clear-interactive-active: var(--ks-border-color-clear-interactive-active-base);
  --ks-border-color-clear-interactive-selected: var(--ks-border-color-clear-interactive-selected-base);
  --ks-border-color-clear-inverted: var(--ks-border-color-clear-inverted-base);
  --ks-border-color-clear-inverted-interactive: var(--ks-border-color-clear-inverted-interactive-base);
  --ks-border-color-clear-inverted-interactive-hover: var(--ks-border-color-clear-inverted-interactive-hover-base);
  --ks-border-color-clear-inverted-interactive-active: var(--ks-border-color-clear-inverted-interactive-active-base);
  --ks-border-color-clear-inverted-interactive-selected: var(--ks-border-color-clear-inverted-interactive-selected-base);
  --ks-border-color-default: var(--ks-border-color-default-base);
  --ks-border-color-default-inverted: var(--ks-border-color-default-inverted-base);
  --ks-border-color-interface: var(--ks-border-color-interface-base);
  --ks-border-color-interface-interactive: var(--ks-border-color-interface-interactive-base);
  --ks-border-color-interface-interactive-disabled: var(--ks-border-color-interface-interactive-disabled-base);
  --ks-border-color-interface-interactive-hover: var(--ks-border-color-interface-interactive-hover-base);
  --ks-border-color-interface-interactive-active: var(--ks-border-color-interface-interactive-active-base);
  --ks-border-color-interface-interactive-selected: var(--ks-border-color-interface-interactive-selected-base);
  --ks-border-color-interface-inverted: var(--ks-border-color-interface-inverted-base);
  --ks-border-color-interface-inverted-interactive: var(--ks-border-color-interface-inverted-interactive-base);
  --ks-border-color-interface-inverted-interactive-disabled: var(--ks-border-color-interface-inverted-interactive-disabled-base);
  --ks-border-color-interface-inverted-interactive-hover: var(--ks-border-color-interface-inverted-interactive-hover-base);
  --ks-border-color-interface-inverted-interactive-active: var(--ks-border-color-interface-inverted-interactive-active-base);
  --ks-border-color-interface-inverted-interactive-selected: var(--ks-border-color-interface-inverted-interactive-selected-base);
  --ks-border-color-primary: var(--ks-border-color-primary-base);
  --ks-border-color-primary-interactive: var(--ks-border-color-primary-interactive-base);
  --ks-border-color-primary-interactive-hover: var(--ks-border-color-primary-interactive-hover-base);
  --ks-border-color-primary-interactive-active: var(--ks-border-color-primary-interactive-active-base);
  --ks-border-color-primary-interactive-selected: var(--ks-border-color-primary-interactive-selected-base);
  --ks-border-color-primary-translucent: var(--ks-border-color-primary-translucent-base);
  --ks-border-color-primary-inverted: var(--ks-border-color-primary-inverted-base);
  --ks-border-color-primary-inverted-interactive: var(--ks-border-color-primary-inverted-interactive-base);
  --ks-border-color-primary-inverted-interactive-hover: var(--ks-border-color-primary-inverted-interactive-hover-base);
  --ks-border-color-primary-inverted-interactive-active: var(--ks-border-color-primary-inverted-interactive-active-base);
  --ks-border-color-primary-inverted-interactive-selected: var(--ks-border-color-primary-inverted-interactive-selected-base);
  --ks-border-color-primary-inverted-translucent: var(--ks-border-color-primary-inverted-translucent-base);
  --ks-color-primary: var(--ks-color-primary-base);
  --ks-color-primary-alpha-1: var(--ks-color-primary-alpha-1-base);
  --ks-color-primary-alpha-2: var(--ks-color-primary-alpha-2-base);
  --ks-color-primary-alpha-3: var(--ks-color-primary-alpha-3-base);
  --ks-color-primary-alpha-4: var(--ks-color-primary-alpha-4-base);
  --ks-color-primary-alpha-5: var(--ks-color-primary-alpha-5-base);
  --ks-color-primary-alpha-6: var(--ks-color-primary-alpha-6-base);
  --ks-color-primary-alpha-7: var(--ks-color-primary-alpha-7-base);
  --ks-color-primary-alpha-8: var(--ks-color-primary-alpha-8-base);
  --ks-color-primary-alpha-9: var(--ks-color-primary-alpha-9-base);
  --ks-color-primary-to-bg-1: var(--ks-color-primary-to-bg-1-base);
  --ks-color-primary-to-bg-2: var(--ks-color-primary-to-bg-2-base);
  --ks-color-primary-to-bg-3: var(--ks-color-primary-to-bg-3-base);
  --ks-color-primary-to-bg-4: var(--ks-color-primary-to-bg-4-base);
  --ks-color-primary-to-bg-5: var(--ks-color-primary-to-bg-5-base);
  --ks-color-primary-to-bg-6: var(--ks-color-primary-to-bg-6-base);
  --ks-color-primary-to-bg-7: var(--ks-color-primary-to-bg-7-base);
  --ks-color-primary-to-bg-8: var(--ks-color-primary-to-bg-8-base);
  --ks-color-primary-to-bg-9: var(--ks-color-primary-to-bg-9-base);
  --ks-color-primary-inverted: var(--ks-color-primary-inverted-base);
  --ks-color-primary-inverted-alpha-1: var(--ks-color-primary-inverted-alpha-1-base);
  --ks-color-primary-inverted-alpha-2: var(--ks-color-primary-inverted-alpha-2-base);
  --ks-color-primary-inverted-alpha-3: var(--ks-color-primary-inverted-alpha-3-base);
  --ks-color-primary-inverted-alpha-4: var(--ks-color-primary-inverted-alpha-4-base);
  --ks-color-primary-inverted-alpha-5: var(--ks-color-primary-inverted-alpha-5-base);
  --ks-color-primary-inverted-alpha-6: var(--ks-color-primary-inverted-alpha-6-base);
  --ks-color-primary-inverted-alpha-7: var(--ks-color-primary-inverted-alpha-7-base);
  --ks-color-primary-inverted-alpha-8: var(--ks-color-primary-inverted-alpha-8-base);
  --ks-color-primary-inverted-alpha-9: var(--ks-color-primary-inverted-alpha-9-base);
  --ks-color-primary-inverted-to-bg-1: var(--ks-color-primary-inverted-to-bg-1-base);
  --ks-color-primary-inverted-to-bg-2: var(--ks-color-primary-inverted-to-bg-2-base);
  --ks-color-primary-inverted-to-bg-3: var(--ks-color-primary-inverted-to-bg-3-base);
  --ks-color-primary-inverted-to-bg-4: var(--ks-color-primary-inverted-to-bg-4-base);
  --ks-color-primary-inverted-to-bg-5: var(--ks-color-primary-inverted-to-bg-5-base);
  --ks-color-primary-inverted-to-bg-6: var(--ks-color-primary-inverted-to-bg-6-base);
  --ks-color-primary-inverted-to-bg-7: var(--ks-color-primary-inverted-to-bg-7-base);
  --ks-color-primary-inverted-to-bg-8: var(--ks-color-primary-inverted-to-bg-8-base);
  --ks-color-primary-inverted-to-bg-9: var(--ks-color-primary-inverted-to-bg-9-base);
  --ks-color-fg: var(--ks-color-fg-base);
  --ks-color-fg-alpha-1: var(--ks-color-fg-alpha-1-base);
  --ks-color-fg-alpha-2: var(--ks-color-fg-alpha-2-base);
  --ks-color-fg-alpha-3: var(--ks-color-fg-alpha-3-base);
  --ks-color-fg-alpha-4: var(--ks-color-fg-alpha-4-base);
  --ks-color-fg-alpha-5: var(--ks-color-fg-alpha-5-base);
  --ks-color-fg-alpha-6: var(--ks-color-fg-alpha-6-base);
  --ks-color-fg-alpha-7: var(--ks-color-fg-alpha-7-base);
  --ks-color-fg-alpha-8: var(--ks-color-fg-alpha-8-base);
  --ks-color-fg-alpha-9: var(--ks-color-fg-alpha-9-base);
  --ks-color-fg-to-bg-1: var(--ks-color-fg-to-bg-1-base);
  --ks-color-fg-to-bg-2: var(--ks-color-fg-to-bg-2-base);
  --ks-color-fg-to-bg-3: var(--ks-color-fg-to-bg-3-base);
  --ks-color-fg-to-bg-4: var(--ks-color-fg-to-bg-4-base);
  --ks-color-fg-to-bg-5: var(--ks-color-fg-to-bg-5-base);
  --ks-color-fg-to-bg-6: var(--ks-color-fg-to-bg-6-base);
  --ks-color-fg-to-bg-7: var(--ks-color-fg-to-bg-7-base);
  --ks-color-fg-to-bg-8: var(--ks-color-fg-to-bg-8-base);
  --ks-color-fg-to-bg-9: var(--ks-color-fg-to-bg-9-base);
  --ks-color-fg-inverted: var(--ks-color-fg-inverted-base);
  --ks-color-fg-inverted-alpha-1: var(--ks-color-fg-inverted-alpha-1-base);
  --ks-color-fg-inverted-alpha-2: var(--ks-color-fg-inverted-alpha-2-base);
  --ks-color-fg-inverted-alpha-3: var(--ks-color-fg-inverted-alpha-3-base);
  --ks-color-fg-inverted-alpha-4: var(--ks-color-fg-inverted-alpha-4-base);
  --ks-color-fg-inverted-alpha-5: var(--ks-color-fg-inverted-alpha-5-base);
  --ks-color-fg-inverted-alpha-6: var(--ks-color-fg-inverted-alpha-6-base);
  --ks-color-fg-inverted-alpha-7: var(--ks-color-fg-inverted-alpha-7-base);
  --ks-color-fg-inverted-alpha-8: var(--ks-color-fg-inverted-alpha-8-base);
  --ks-color-fg-inverted-alpha-9: var(--ks-color-fg-inverted-alpha-9-base);
  --ks-color-fg-inverted-to-bg-1: var(--ks-color-fg-inverted-to-bg-1-base);
  --ks-color-fg-inverted-to-bg-2: var(--ks-color-fg-inverted-to-bg-2-base);
  --ks-color-fg-inverted-to-bg-3: var(--ks-color-fg-inverted-to-bg-3-base);
  --ks-color-fg-inverted-to-bg-4: var(--ks-color-fg-inverted-to-bg-4-base);
  --ks-color-fg-inverted-to-bg-5: var(--ks-color-fg-inverted-to-bg-5-base);
  --ks-color-fg-inverted-to-bg-6: var(--ks-color-fg-inverted-to-bg-6-base);
  --ks-color-fg-inverted-to-bg-7: var(--ks-color-fg-inverted-to-bg-7-base);
  --ks-color-fg-inverted-to-bg-8: var(--ks-color-fg-inverted-to-bg-8-base);
  --ks-color-fg-inverted-to-bg-9: var(--ks-color-fg-inverted-to-bg-9-base);
  --ks-color-link: var(--ks-color-link-base);
  --ks-color-link-inverted: var(--ks-color-link-inverted-base);
  --ks-color-transparent: var(--ks-color-transparent-base);
  --ks-color-notice: var(--ks-color-notice-base);
  --ks-color-notice-alpha-1: var(--ks-color-notice-alpha-1-base);
  --ks-color-notice-alpha-2: var(--ks-color-notice-alpha-2-base);
  --ks-color-notice-alpha-3: var(--ks-color-notice-alpha-3-base);
  --ks-color-notice-alpha-4: var(--ks-color-notice-alpha-4-base);
  --ks-color-notice-alpha-5: var(--ks-color-notice-alpha-5-base);
  --ks-color-notice-alpha-6: var(--ks-color-notice-alpha-6-base);
  --ks-color-notice-alpha-7: var(--ks-color-notice-alpha-7-base);
  --ks-color-notice-alpha-8: var(--ks-color-notice-alpha-8-base);
  --ks-color-notice-alpha-9: var(--ks-color-notice-alpha-9-base);
  --ks-color-notice-to-bg-1: var(--ks-color-notice-to-bg-1-base);
  --ks-color-notice-to-bg-2: var(--ks-color-notice-to-bg-2-base);
  --ks-color-notice-to-bg-3: var(--ks-color-notice-to-bg-3-base);
  --ks-color-notice-to-bg-4: var(--ks-color-notice-to-bg-4-base);
  --ks-color-notice-to-bg-5: var(--ks-color-notice-to-bg-5-base);
  --ks-color-notice-to-bg-6: var(--ks-color-notice-to-bg-6-base);
  --ks-color-notice-to-bg-7: var(--ks-color-notice-to-bg-7-base);
  --ks-color-notice-to-bg-8: var(--ks-color-notice-to-bg-8-base);
  --ks-color-notice-to-bg-9: var(--ks-color-notice-to-bg-9-base);
  --ks-color-notice-inverted: var(--ks-color-notice-inverted-base);
  --ks-color-notice-inverted-alpha-1: var(--ks-color-notice-inverted-alpha-1-base);
  --ks-color-notice-inverted-alpha-2: var(--ks-color-notice-inverted-alpha-2-base);
  --ks-color-notice-inverted-alpha-3: var(--ks-color-notice-inverted-alpha-3-base);
  --ks-color-notice-inverted-alpha-4: var(--ks-color-notice-inverted-alpha-4-base);
  --ks-color-notice-inverted-alpha-5: var(--ks-color-notice-inverted-alpha-5-base);
  --ks-color-notice-inverted-alpha-6: var(--ks-color-notice-inverted-alpha-6-base);
  --ks-color-notice-inverted-alpha-7: var(--ks-color-notice-inverted-alpha-7-base);
  --ks-color-notice-inverted-alpha-8: var(--ks-color-notice-inverted-alpha-8-base);
  --ks-color-notice-inverted-alpha-9: var(--ks-color-notice-inverted-alpha-9-base);
  --ks-color-notice-inverted-to-bg-1: var(--ks-color-notice-inverted-to-bg-1-base);
  --ks-color-notice-inverted-to-bg-2: var(--ks-color-notice-inverted-to-bg-2-base);
  --ks-color-notice-inverted-to-bg-3: var(--ks-color-notice-inverted-to-bg-3-base);
  --ks-color-notice-inverted-to-bg-4: var(--ks-color-notice-inverted-to-bg-4-base);
  --ks-color-notice-inverted-to-bg-5: var(--ks-color-notice-inverted-to-bg-5-base);
  --ks-color-notice-inverted-to-bg-6: var(--ks-color-notice-inverted-to-bg-6-base);
  --ks-color-notice-inverted-to-bg-7: var(--ks-color-notice-inverted-to-bg-7-base);
  --ks-color-notice-inverted-to-bg-8: var(--ks-color-notice-inverted-to-bg-8-base);
  --ks-color-notice-inverted-to-bg-9: var(--ks-color-notice-inverted-to-bg-9-base);
  --ks-color-positive: var(--ks-color-positive-base);
  --ks-color-positive-alpha-1: var(--ks-color-positive-alpha-1-base);
  --ks-color-positive-alpha-2: var(--ks-color-positive-alpha-2-base);
  --ks-color-positive-alpha-3: var(--ks-color-positive-alpha-3-base);
  --ks-color-positive-alpha-4: var(--ks-color-positive-alpha-4-base);
  --ks-color-positive-alpha-5: var(--ks-color-positive-alpha-5-base);
  --ks-color-positive-alpha-6: var(--ks-color-positive-alpha-6-base);
  --ks-color-positive-alpha-7: var(--ks-color-positive-alpha-7-base);
  --ks-color-positive-alpha-8: var(--ks-color-positive-alpha-8-base);
  --ks-color-positive-alpha-9: var(--ks-color-positive-alpha-9-base);
  --ks-color-positive-to-bg-1: var(--ks-color-positive-to-bg-1-base);
  --ks-color-positive-to-bg-2: var(--ks-color-positive-to-bg-2-base);
  --ks-color-positive-to-bg-3: var(--ks-color-positive-to-bg-3-base);
  --ks-color-positive-to-bg-4: var(--ks-color-positive-to-bg-4-base);
  --ks-color-positive-to-bg-5: var(--ks-color-positive-to-bg-5-base);
  --ks-color-positive-to-bg-6: var(--ks-color-positive-to-bg-6-base);
  --ks-color-positive-to-bg-7: var(--ks-color-positive-to-bg-7-base);
  --ks-color-positive-to-bg-8: var(--ks-color-positive-to-bg-8-base);
  --ks-color-positive-to-bg-9: var(--ks-color-positive-to-bg-9-base);
  --ks-color-positive-inverted: var(--ks-color-positive-inverted-base);
  --ks-color-positive-inverted-alpha-1: var(--ks-color-positive-inverted-alpha-1-base);
  --ks-color-positive-inverted-alpha-2: var(--ks-color-positive-inverted-alpha-2-base);
  --ks-color-positive-inverted-alpha-3: var(--ks-color-positive-inverted-alpha-3-base);
  --ks-color-positive-inverted-alpha-4: var(--ks-color-positive-inverted-alpha-4-base);
  --ks-color-positive-inverted-alpha-5: var(--ks-color-positive-inverted-alpha-5-base);
  --ks-color-positive-inverted-alpha-6: var(--ks-color-positive-inverted-alpha-6-base);
  --ks-color-positive-inverted-alpha-7: var(--ks-color-positive-inverted-alpha-7-base);
  --ks-color-positive-inverted-alpha-8: var(--ks-color-positive-inverted-alpha-8-base);
  --ks-color-positive-inverted-alpha-9: var(--ks-color-positive-inverted-alpha-9-base);
  --ks-color-positive-inverted-to-bg-1: var(--ks-color-positive-inverted-to-bg-1-base);
  --ks-color-positive-inverted-to-bg-2: var(--ks-color-positive-inverted-to-bg-2-base);
  --ks-color-positive-inverted-to-bg-3: var(--ks-color-positive-inverted-to-bg-3-base);
  --ks-color-positive-inverted-to-bg-4: var(--ks-color-positive-inverted-to-bg-4-base);
  --ks-color-positive-inverted-to-bg-5: var(--ks-color-positive-inverted-to-bg-5-base);
  --ks-color-positive-inverted-to-bg-6: var(--ks-color-positive-inverted-to-bg-6-base);
  --ks-color-positive-inverted-to-bg-7: var(--ks-color-positive-inverted-to-bg-7-base);
  --ks-color-positive-inverted-to-bg-8: var(--ks-color-positive-inverted-to-bg-8-base);
  --ks-color-positive-inverted-to-bg-9: var(--ks-color-positive-inverted-to-bg-9-base);
  --ks-color-informative: var(--ks-color-informative-base);
  --ks-color-informative-alpha-1: var(--ks-color-informative-alpha-1-base);
  --ks-color-informative-alpha-2: var(--ks-color-informative-alpha-2-base);
  --ks-color-informative-alpha-3: var(--ks-color-informative-alpha-3-base);
  --ks-color-informative-alpha-4: var(--ks-color-informative-alpha-4-base);
  --ks-color-informative-alpha-5: var(--ks-color-informative-alpha-5-base);
  --ks-color-informative-alpha-6: var(--ks-color-informative-alpha-6-base);
  --ks-color-informative-alpha-7: var(--ks-color-informative-alpha-7-base);
  --ks-color-informative-alpha-8: var(--ks-color-informative-alpha-8-base);
  --ks-color-informative-alpha-9: var(--ks-color-informative-alpha-9-base);
  --ks-color-informative-to-bg-1: var(--ks-color-informative-to-bg-1-base);
  --ks-color-informative-to-bg-2: var(--ks-color-informative-to-bg-2-base);
  --ks-color-informative-to-bg-3: var(--ks-color-informative-to-bg-3-base);
  --ks-color-informative-to-bg-4: var(--ks-color-informative-to-bg-4-base);
  --ks-color-informative-to-bg-5: var(--ks-color-informative-to-bg-5-base);
  --ks-color-informative-to-bg-6: var(--ks-color-informative-to-bg-6-base);
  --ks-color-informative-to-bg-7: var(--ks-color-informative-to-bg-7-base);
  --ks-color-informative-to-bg-8: var(--ks-color-informative-to-bg-8-base);
  --ks-color-informative-to-bg-9: var(--ks-color-informative-to-bg-9-base);
  --ks-color-informative-inverted: var(--ks-color-informative-inverted-base);
  --ks-color-informative-inverted-alpha-1: var(--ks-color-informative-inverted-alpha-1-base);
  --ks-color-informative-inverted-alpha-2: var(--ks-color-informative-inverted-alpha-2-base);
  --ks-color-informative-inverted-alpha-3: var(--ks-color-informative-inverted-alpha-3-base);
  --ks-color-informative-inverted-alpha-4: var(--ks-color-informative-inverted-alpha-4-base);
  --ks-color-informative-inverted-alpha-5: var(--ks-color-informative-inverted-alpha-5-base);
  --ks-color-informative-inverted-alpha-6: var(--ks-color-informative-inverted-alpha-6-base);
  --ks-color-informative-inverted-alpha-7: var(--ks-color-informative-inverted-alpha-7-base);
  --ks-color-informative-inverted-alpha-8: var(--ks-color-informative-inverted-alpha-8-base);
  --ks-color-informative-inverted-alpha-9: var(--ks-color-informative-inverted-alpha-9-base);
  --ks-color-informative-inverted-to-bg-1: var(--ks-color-informative-inverted-to-bg-1-base);
  --ks-color-informative-inverted-to-bg-2: var(--ks-color-informative-inverted-to-bg-2-base);
  --ks-color-informative-inverted-to-bg-3: var(--ks-color-informative-inverted-to-bg-3-base);
  --ks-color-informative-inverted-to-bg-4: var(--ks-color-informative-inverted-to-bg-4-base);
  --ks-color-informative-inverted-to-bg-5: var(--ks-color-informative-inverted-to-bg-5-base);
  --ks-color-informative-inverted-to-bg-6: var(--ks-color-informative-inverted-to-bg-6-base);
  --ks-color-informative-inverted-to-bg-7: var(--ks-color-informative-inverted-to-bg-7-base);
  --ks-color-informative-inverted-to-bg-8: var(--ks-color-informative-inverted-to-bg-8-base);
  --ks-color-informative-inverted-to-bg-9: var(--ks-color-informative-inverted-to-bg-9-base);
  --ks-color-negative: var(--ks-color-negative-base);
  --ks-color-negative-alpha-1: var(--ks-color-negative-alpha-1-base);
  --ks-color-negative-alpha-2: var(--ks-color-negative-alpha-2-base);
  --ks-color-negative-alpha-3: var(--ks-color-negative-alpha-3-base);
  --ks-color-negative-alpha-4: var(--ks-color-negative-alpha-4-base);
  --ks-color-negative-alpha-5: var(--ks-color-negative-alpha-5-base);
  --ks-color-negative-alpha-6: var(--ks-color-negative-alpha-6-base);
  --ks-color-negative-alpha-7: var(--ks-color-negative-alpha-7-base);
  --ks-color-negative-alpha-8: var(--ks-color-negative-alpha-8-base);
  --ks-color-negative-alpha-9: var(--ks-color-negative-alpha-9-base);
  --ks-color-negative-to-bg-1: var(--ks-color-negative-to-bg-1-base);
  --ks-color-negative-to-bg-2: var(--ks-color-negative-to-bg-2-base);
  --ks-color-negative-to-bg-3: var(--ks-color-negative-to-bg-3-base);
  --ks-color-negative-to-bg-4: var(--ks-color-negative-to-bg-4-base);
  --ks-color-negative-to-bg-5: var(--ks-color-negative-to-bg-5-base);
  --ks-color-negative-to-bg-6: var(--ks-color-negative-to-bg-6-base);
  --ks-color-negative-to-bg-7: var(--ks-color-negative-to-bg-7-base);
  --ks-color-negative-to-bg-8: var(--ks-color-negative-to-bg-8-base);
  --ks-color-negative-to-bg-9: var(--ks-color-negative-to-bg-9-base);
  --ks-color-negative-inverted: var(--ks-color-negative-inverted-base);
  --ks-color-negative-inverted-alpha-1: var(--ks-color-negative-inverted-alpha-1-base);
  --ks-color-negative-inverted-alpha-2: var(--ks-color-negative-inverted-alpha-2-base);
  --ks-color-negative-inverted-alpha-3: var(--ks-color-negative-inverted-alpha-3-base);
  --ks-color-negative-inverted-alpha-4: var(--ks-color-negative-inverted-alpha-4-base);
  --ks-color-negative-inverted-alpha-5: var(--ks-color-negative-inverted-alpha-5-base);
  --ks-color-negative-inverted-alpha-6: var(--ks-color-negative-inverted-alpha-6-base);
  --ks-color-negative-inverted-alpha-7: var(--ks-color-negative-inverted-alpha-7-base);
  --ks-color-negative-inverted-alpha-8: var(--ks-color-negative-inverted-alpha-8-base);
  --ks-color-negative-inverted-alpha-9: var(--ks-color-negative-inverted-alpha-9-base);
  --ks-color-negative-inverted-to-bg-1: var(--ks-color-negative-inverted-to-bg-1-base);
  --ks-color-negative-inverted-to-bg-2: var(--ks-color-negative-inverted-to-bg-2-base);
  --ks-color-negative-inverted-to-bg-3: var(--ks-color-negative-inverted-to-bg-3-base);
  --ks-color-negative-inverted-to-bg-4: var(--ks-color-negative-inverted-to-bg-4-base);
  --ks-color-negative-inverted-to-bg-5: var(--ks-color-negative-inverted-to-bg-5-base);
  --ks-color-negative-inverted-to-bg-6: var(--ks-color-negative-inverted-to-bg-6-base);
  --ks-color-negative-inverted-to-bg-7: var(--ks-color-negative-inverted-to-bg-7-base);
  --ks-color-negative-inverted-to-bg-8: var(--ks-color-negative-inverted-to-bg-8-base);
  --ks-color-negative-inverted-to-bg-9: var(--ks-color-negative-inverted-to-bg-9-base);
  --ks-text-color-default: var(--ks-text-color-default-base);
  --ks-text-color-default-interactive: var(--ks-text-color-default-interactive-base);
  --ks-text-color-default-interactive-hover: var(--ks-text-color-default-interactive-hover-base);
  --ks-text-color-default-interactive-active: var(--ks-text-color-default-interactive-active-base);
  --ks-text-color-default-interactive-visited: var(--ks-text-color-default-interactive-visited-base);
  --ks-text-color-default-inverted: var(--ks-text-color-default-inverted-base);
  --ks-text-color-default-inverted-interactive: var(--ks-text-color-default-inverted-interactive-base);
  --ks-text-color-default-inverted-interactive-hover: var(--ks-text-color-default-inverted-interactive-hover-base);
  --ks-text-color-default-inverted-interactive-active: var(--ks-text-color-default-inverted-interactive-active-base);
  --ks-text-color-default-inverted-interactive-visited: var(--ks-text-color-default-inverted-interactive-visited-base);
  --ks-text-color-interface: var(--ks-text-color-interface-base);
  --ks-text-color-interface-interactive: var(--ks-text-color-interface-interactive-base);
  --ks-text-color-interface-interactive-hover: var(--ks-text-color-interface-interactive-hover-base);
  --ks-text-color-interface-interactive-active: var(--ks-text-color-interface-interactive-active-base);
  --ks-text-color-interface-interactive-visited: var(--ks-text-color-interface-interactive-visited-base);
  --ks-text-color-interface-inverted: var(--ks-text-color-interface-inverted-base);
  --ks-text-color-interface-inverted-interactive: var(--ks-text-color-interface-inverted-interactive-base);
  --ks-text-color-interface-inverted-interactive-hover: var(--ks-text-color-interface-inverted-interactive-hover-base);
  --ks-text-color-interface-inverted-interactive-active: var(--ks-text-color-interface-inverted-interactive-active-base);
  --ks-text-color-interface-inverted-interactive-visited: var(--ks-text-color-interface-inverted-interactive-visited-base);
  --ks-text-color-primary: var(--ks-text-color-primary-base);
  --ks-text-color-primary-interactive: var(--ks-text-color-primary-interactive-base);
  --ks-text-color-primary-interactive-hover: var(--ks-text-color-primary-interactive-hover-base);
  --ks-text-color-primary-interactive-active: var(--ks-text-color-primary-interactive-active-base);
  --ks-text-color-primary-interactive-visited: var(--ks-text-color-primary-interactive-visited-base);
  --ks-text-color-primary-inverted: var(--ks-text-color-primary-inverted-base);
  --ks-text-color-primary-inverted-interactive: var(--ks-text-color-primary-inverted-interactive-base);
  --ks-text-color-primary-inverted-interactive-hover: var(--ks-text-color-primary-inverted-interactive-hover-base);
  --ks-text-color-primary-inverted-interactive-active: var(--ks-text-color-primary-inverted-interactive-active-base);
  --ks-text-color-primary-inverted-interactive-visited: var(--ks-text-color-primary-inverted-interactive-visited-base);
}

[ks-inverted=true] {
  --ks-background-color-accent: var(--ks-background-color-accent-inverted-base);
  --ks-background-color-accent-inverted: var(--ks-background-color-accent-base);
  --ks-background-color-clear: var(--ks-background-color-clear-inverted-base);
  --ks-background-color-clear-inverted: var(--ks-background-color-clear-base);
  --ks-background-color-clear-interactive: var(--ks-background-color-clear-inverted-interactive-base);
  --ks-background-color-clear-inverted-interactive: var(--ks-background-color-clear-interactive-base);
  --ks-background-color-clear-interactive-hover: var(--ks-background-color-clear-inverted-interactive-hover-base);
  --ks-background-color-clear-inverted-interactive-hover: var(--ks-background-color-clear-interactive-hover-base);
  --ks-background-color-clear-interactive-active: var(--ks-background-color-clear-inverted-interactive-active-base);
  --ks-background-color-clear-inverted-interactive-active: var(--ks-background-color-clear-interactive-active-base);
  --ks-background-color-clear-interactive-selected: var(--ks-background-color-clear-inverted-interactive-selected-base);
  --ks-background-color-clear-inverted-interactive-selected: var(--ks-background-color-clear-interactive-selected-base);
  --ks-background-color-default: var(--ks-background-color-default-inverted-base);
  --ks-background-color-default-inverted: var(--ks-background-color-default-base);
  --ks-background-color-interface: var(--ks-background-color-interface-inverted-base);
  --ks-background-color-interface-inverted: var(--ks-background-color-interface-base);
  --ks-background-color-interface-interactive: var(--ks-background-color-interface-inverted-interactive-base);
  --ks-background-color-interface-inverted-interactive: var(--ks-background-color-interface-interactive-base);
  --ks-background-color-interface-interactive-disabled: var(--ks-background-color-interface-inverted-interactive-disabled-base);
  --ks-background-color-interface-inverted-interactive-disabled: var(--ks-background-color-interface-interactive-disabled-base);
  --ks-background-color-interface-interactive-hover: var(--ks-background-color-interface-inverted-interactive-hover-base);
  --ks-background-color-interface-inverted-interactive-hover: var(--ks-background-color-interface-interactive-hover-base);
  --ks-background-color-interface-interactive-active: var(--ks-background-color-interface-inverted-interactive-active-base);
  --ks-background-color-interface-inverted-interactive-active: var(--ks-background-color-interface-interactive-active-base);
  --ks-background-color-interface-interactive-selected: var(--ks-background-color-interface-inverted-interactive-selected-base);
  --ks-background-color-interface-inverted-interactive-selected: var(--ks-background-color-interface-interactive-selected-base);
  --ks-background-color-primary: var(--ks-background-color-primary-inverted-base);
  --ks-background-color-primary-inverted: var(--ks-background-color-primary-base);
  --ks-background-color-primary-interactive: var(--ks-background-color-primary-inverted-interactive-base);
  --ks-background-color-primary-inverted-interactive: var(--ks-background-color-primary-interactive-base);
  --ks-background-color-primary-interactive-hover: var(--ks-background-color-primary-inverted-interactive-hover-base);
  --ks-background-color-primary-inverted-interactive-hover: var(--ks-background-color-primary-interactive-hover-base);
  --ks-background-color-primary-interactive-active: var(--ks-background-color-primary-inverted-interactive-active-base);
  --ks-background-color-primary-inverted-interactive-active: var(--ks-background-color-primary-interactive-active-base);
  --ks-background-color-primary-interactive-selected: var(--ks-background-color-primary-inverted-interactive-selected-base);
  --ks-background-color-primary-inverted-interactive-selected: var(--ks-background-color-primary-interactive-selected-base);
  --ks-background-color-primary-translucent: var(--ks-background-color-primary-inverted-translucent-base);
  --ks-background-color-primary-inverted-translucent: var(--ks-background-color-primary-translucent-base);
  --ks-border-color-accent: var(--ks-border-color-accent-inverted-base);
  --ks-border-color-accent-inverted: var(--ks-border-color-accent-base);
  --ks-border-color-clear: var(--ks-border-color-clear-inverted-base);
  --ks-border-color-clear-inverted: var(--ks-border-color-clear-base);
  --ks-border-color-clear-interactive: var(--ks-border-color-clear-inverted-interactive-base);
  --ks-border-color-clear-inverted-interactive: var(--ks-border-color-clear-interactive-base);
  --ks-border-color-clear-interactive-hover: var(--ks-border-color-clear-inverted-interactive-hover-base);
  --ks-border-color-clear-inverted-interactive-hover: var(--ks-border-color-clear-interactive-hover-base);
  --ks-border-color-clear-interactive-active: var(--ks-border-color-clear-inverted-interactive-active-base);
  --ks-border-color-clear-inverted-interactive-active: var(--ks-border-color-clear-interactive-active-base);
  --ks-border-color-clear-interactive-selected: var(--ks-border-color-clear-inverted-interactive-selected-base);
  --ks-border-color-clear-inverted-interactive-selected: var(--ks-border-color-clear-interactive-selected-base);
  --ks-border-color-default: var(--ks-border-color-default-inverted-base);
  --ks-border-color-default-inverted: var(--ks-border-color-default-base);
  --ks-border-color-interface: var(--ks-border-color-interface-inverted-base);
  --ks-border-color-interface-inverted: var(--ks-border-color-interface-base);
  --ks-border-color-interface-interactive: var(--ks-border-color-interface-inverted-interactive-base);
  --ks-border-color-interface-inverted-interactive: var(--ks-border-color-interface-interactive-base);
  --ks-border-color-interface-interactive-disabled: var(--ks-border-color-interface-inverted-interactive-disabled-base);
  --ks-border-color-interface-inverted-interactive-disabled: var(--ks-border-color-interface-interactive-disabled-base);
  --ks-border-color-interface-interactive-hover: var(--ks-border-color-interface-inverted-interactive-hover-base);
  --ks-border-color-interface-inverted-interactive-hover: var(--ks-border-color-interface-interactive-hover-base);
  --ks-border-color-interface-interactive-active: var(--ks-border-color-interface-inverted-interactive-active-base);
  --ks-border-color-interface-inverted-interactive-active: var(--ks-border-color-interface-interactive-active-base);
  --ks-border-color-interface-interactive-selected: var(--ks-border-color-interface-inverted-interactive-selected-base);
  --ks-border-color-interface-inverted-interactive-selected: var(--ks-border-color-interface-interactive-selected-base);
  --ks-border-color-primary: var(--ks-border-color-primary-inverted-base);
  --ks-border-color-primary-inverted: var(--ks-border-color-primary-base);
  --ks-border-color-primary-interactive: var(--ks-border-color-primary-inverted-interactive-base);
  --ks-border-color-primary-inverted-interactive: var(--ks-border-color-primary-interactive-base);
  --ks-border-color-primary-interactive-hover: var(--ks-border-color-primary-inverted-interactive-hover-base);
  --ks-border-color-primary-inverted-interactive-hover: var(--ks-border-color-primary-interactive-hover-base);
  --ks-border-color-primary-interactive-active: var(--ks-border-color-primary-inverted-interactive-active-base);
  --ks-border-color-primary-inverted-interactive-active: var(--ks-border-color-primary-interactive-active-base);
  --ks-border-color-primary-interactive-selected: var(--ks-border-color-primary-inverted-interactive-selected-base);
  --ks-border-color-primary-inverted-interactive-selected: var(--ks-border-color-primary-interactive-selected-base);
  --ks-border-color-primary-translucent: var(--ks-border-color-primary-inverted-translucent-base);
  --ks-border-color-primary-inverted-translucent: var(--ks-border-color-primary-translucent-base);
  --ks-color-primary: var(--ks-color-primary-inverted-base);
  --ks-color-primary-inverted: var(--ks-color-primary-base);
  --ks-color-primary-alpha-1: var(--ks-color-primary-inverted-alpha-1-base);
  --ks-color-primary-inverted-alpha-1: var(--ks-color-primary-alpha-1-base);
  --ks-color-primary-alpha-2: var(--ks-color-primary-inverted-alpha-2-base);
  --ks-color-primary-inverted-alpha-2: var(--ks-color-primary-alpha-2-base);
  --ks-color-primary-alpha-3: var(--ks-color-primary-inverted-alpha-3-base);
  --ks-color-primary-inverted-alpha-3: var(--ks-color-primary-alpha-3-base);
  --ks-color-primary-alpha-4: var(--ks-color-primary-inverted-alpha-4-base);
  --ks-color-primary-inverted-alpha-4: var(--ks-color-primary-alpha-4-base);
  --ks-color-primary-alpha-5: var(--ks-color-primary-inverted-alpha-5-base);
  --ks-color-primary-inverted-alpha-5: var(--ks-color-primary-alpha-5-base);
  --ks-color-primary-alpha-6: var(--ks-color-primary-inverted-alpha-6-base);
  --ks-color-primary-inverted-alpha-6: var(--ks-color-primary-alpha-6-base);
  --ks-color-primary-alpha-7: var(--ks-color-primary-inverted-alpha-7-base);
  --ks-color-primary-inverted-alpha-7: var(--ks-color-primary-alpha-7-base);
  --ks-color-primary-alpha-8: var(--ks-color-primary-inverted-alpha-8-base);
  --ks-color-primary-inverted-alpha-8: var(--ks-color-primary-alpha-8-base);
  --ks-color-primary-alpha-9: var(--ks-color-primary-inverted-alpha-9-base);
  --ks-color-primary-inverted-alpha-9: var(--ks-color-primary-alpha-9-base);
  --ks-color-primary-to-bg-1: var(--ks-color-primary-inverted-to-bg-1-base);
  --ks-color-primary-inverted-to-bg-1: var(--ks-color-primary-to-bg-1-base);
  --ks-color-primary-to-bg-2: var(--ks-color-primary-inverted-to-bg-2-base);
  --ks-color-primary-inverted-to-bg-2: var(--ks-color-primary-to-bg-2-base);
  --ks-color-primary-to-bg-3: var(--ks-color-primary-inverted-to-bg-3-base);
  --ks-color-primary-inverted-to-bg-3: var(--ks-color-primary-to-bg-3-base);
  --ks-color-primary-to-bg-4: var(--ks-color-primary-inverted-to-bg-4-base);
  --ks-color-primary-inverted-to-bg-4: var(--ks-color-primary-to-bg-4-base);
  --ks-color-primary-to-bg-5: var(--ks-color-primary-inverted-to-bg-5-base);
  --ks-color-primary-inverted-to-bg-5: var(--ks-color-primary-to-bg-5-base);
  --ks-color-primary-to-bg-6: var(--ks-color-primary-inverted-to-bg-6-base);
  --ks-color-primary-inverted-to-bg-6: var(--ks-color-primary-to-bg-6-base);
  --ks-color-primary-to-bg-7: var(--ks-color-primary-inverted-to-bg-7-base);
  --ks-color-primary-inverted-to-bg-7: var(--ks-color-primary-to-bg-7-base);
  --ks-color-primary-to-bg-8: var(--ks-color-primary-inverted-to-bg-8-base);
  --ks-color-primary-inverted-to-bg-8: var(--ks-color-primary-to-bg-8-base);
  --ks-color-primary-to-bg-9: var(--ks-color-primary-inverted-to-bg-9-base);
  --ks-color-primary-inverted-to-bg-9: var(--ks-color-primary-to-bg-9-base);
  --ks-color-fg: var(--ks-color-fg-inverted-base);
  --ks-color-fg-inverted: var(--ks-color-fg-base);
  --ks-color-fg-alpha-1: var(--ks-color-fg-inverted-alpha-1-base);
  --ks-color-fg-inverted-alpha-1: var(--ks-color-fg-alpha-1-base);
  --ks-color-fg-alpha-2: var(--ks-color-fg-inverted-alpha-2-base);
  --ks-color-fg-inverted-alpha-2: var(--ks-color-fg-alpha-2-base);
  --ks-color-fg-alpha-3: var(--ks-color-fg-inverted-alpha-3-base);
  --ks-color-fg-inverted-alpha-3: var(--ks-color-fg-alpha-3-base);
  --ks-color-fg-alpha-4: var(--ks-color-fg-inverted-alpha-4-base);
  --ks-color-fg-inverted-alpha-4: var(--ks-color-fg-alpha-4-base);
  --ks-color-fg-alpha-5: var(--ks-color-fg-inverted-alpha-5-base);
  --ks-color-fg-inverted-alpha-5: var(--ks-color-fg-alpha-5-base);
  --ks-color-fg-alpha-6: var(--ks-color-fg-inverted-alpha-6-base);
  --ks-color-fg-inverted-alpha-6: var(--ks-color-fg-alpha-6-base);
  --ks-color-fg-alpha-7: var(--ks-color-fg-inverted-alpha-7-base);
  --ks-color-fg-inverted-alpha-7: var(--ks-color-fg-alpha-7-base);
  --ks-color-fg-alpha-8: var(--ks-color-fg-inverted-alpha-8-base);
  --ks-color-fg-inverted-alpha-8: var(--ks-color-fg-alpha-8-base);
  --ks-color-fg-alpha-9: var(--ks-color-fg-inverted-alpha-9-base);
  --ks-color-fg-inverted-alpha-9: var(--ks-color-fg-alpha-9-base);
  --ks-color-fg-to-bg-1: var(--ks-color-fg-inverted-to-bg-1-base);
  --ks-color-fg-inverted-to-bg-1: var(--ks-color-fg-to-bg-1-base);
  --ks-color-fg-to-bg-2: var(--ks-color-fg-inverted-to-bg-2-base);
  --ks-color-fg-inverted-to-bg-2: var(--ks-color-fg-to-bg-2-base);
  --ks-color-fg-to-bg-3: var(--ks-color-fg-inverted-to-bg-3-base);
  --ks-color-fg-inverted-to-bg-3: var(--ks-color-fg-to-bg-3-base);
  --ks-color-fg-to-bg-4: var(--ks-color-fg-inverted-to-bg-4-base);
  --ks-color-fg-inverted-to-bg-4: var(--ks-color-fg-to-bg-4-base);
  --ks-color-fg-to-bg-5: var(--ks-color-fg-inverted-to-bg-5-base);
  --ks-color-fg-inverted-to-bg-5: var(--ks-color-fg-to-bg-5-base);
  --ks-color-fg-to-bg-6: var(--ks-color-fg-inverted-to-bg-6-base);
  --ks-color-fg-inverted-to-bg-6: var(--ks-color-fg-to-bg-6-base);
  --ks-color-fg-to-bg-7: var(--ks-color-fg-inverted-to-bg-7-base);
  --ks-color-fg-inverted-to-bg-7: var(--ks-color-fg-to-bg-7-base);
  --ks-color-fg-to-bg-8: var(--ks-color-fg-inverted-to-bg-8-base);
  --ks-color-fg-inverted-to-bg-8: var(--ks-color-fg-to-bg-8-base);
  --ks-color-fg-to-bg-9: var(--ks-color-fg-inverted-to-bg-9-base);
  --ks-color-fg-inverted-to-bg-9: var(--ks-color-fg-to-bg-9-base);
  --ks-color-link: var(--ks-color-link-inverted-base);
  --ks-color-link-inverted: var(--ks-color-link-base);
  --ks-color-notice: var(--ks-color-notice-inverted-base);
  --ks-color-notice-inverted: var(--ks-color-notice-base);
  --ks-color-notice-alpha-1: var(--ks-color-notice-inverted-alpha-1-base);
  --ks-color-notice-inverted-alpha-1: var(--ks-color-notice-alpha-1-base);
  --ks-color-notice-alpha-2: var(--ks-color-notice-inverted-alpha-2-base);
  --ks-color-notice-inverted-alpha-2: var(--ks-color-notice-alpha-2-base);
  --ks-color-notice-alpha-3: var(--ks-color-notice-inverted-alpha-3-base);
  --ks-color-notice-inverted-alpha-3: var(--ks-color-notice-alpha-3-base);
  --ks-color-notice-alpha-4: var(--ks-color-notice-inverted-alpha-4-base);
  --ks-color-notice-inverted-alpha-4: var(--ks-color-notice-alpha-4-base);
  --ks-color-notice-alpha-5: var(--ks-color-notice-inverted-alpha-5-base);
  --ks-color-notice-inverted-alpha-5: var(--ks-color-notice-alpha-5-base);
  --ks-color-notice-alpha-6: var(--ks-color-notice-inverted-alpha-6-base);
  --ks-color-notice-inverted-alpha-6: var(--ks-color-notice-alpha-6-base);
  --ks-color-notice-alpha-7: var(--ks-color-notice-inverted-alpha-7-base);
  --ks-color-notice-inverted-alpha-7: var(--ks-color-notice-alpha-7-base);
  --ks-color-notice-alpha-8: var(--ks-color-notice-inverted-alpha-8-base);
  --ks-color-notice-inverted-alpha-8: var(--ks-color-notice-alpha-8-base);
  --ks-color-notice-alpha-9: var(--ks-color-notice-inverted-alpha-9-base);
  --ks-color-notice-inverted-alpha-9: var(--ks-color-notice-alpha-9-base);
  --ks-color-notice-to-bg-1: var(--ks-color-notice-inverted-to-bg-1-base);
  --ks-color-notice-inverted-to-bg-1: var(--ks-color-notice-to-bg-1-base);
  --ks-color-notice-to-bg-2: var(--ks-color-notice-inverted-to-bg-2-base);
  --ks-color-notice-inverted-to-bg-2: var(--ks-color-notice-to-bg-2-base);
  --ks-color-notice-to-bg-3: var(--ks-color-notice-inverted-to-bg-3-base);
  --ks-color-notice-inverted-to-bg-3: var(--ks-color-notice-to-bg-3-base);
  --ks-color-notice-to-bg-4: var(--ks-color-notice-inverted-to-bg-4-base);
  --ks-color-notice-inverted-to-bg-4: var(--ks-color-notice-to-bg-4-base);
  --ks-color-notice-to-bg-5: var(--ks-color-notice-inverted-to-bg-5-base);
  --ks-color-notice-inverted-to-bg-5: var(--ks-color-notice-to-bg-5-base);
  --ks-color-notice-to-bg-6: var(--ks-color-notice-inverted-to-bg-6-base);
  --ks-color-notice-inverted-to-bg-6: var(--ks-color-notice-to-bg-6-base);
  --ks-color-notice-to-bg-7: var(--ks-color-notice-inverted-to-bg-7-base);
  --ks-color-notice-inverted-to-bg-7: var(--ks-color-notice-to-bg-7-base);
  --ks-color-notice-to-bg-8: var(--ks-color-notice-inverted-to-bg-8-base);
  --ks-color-notice-inverted-to-bg-8: var(--ks-color-notice-to-bg-8-base);
  --ks-color-notice-to-bg-9: var(--ks-color-notice-inverted-to-bg-9-base);
  --ks-color-notice-inverted-to-bg-9: var(--ks-color-notice-to-bg-9-base);
  --ks-color-positive: var(--ks-color-positive-inverted-base);
  --ks-color-positive-inverted: var(--ks-color-positive-base);
  --ks-color-positive-alpha-1: var(--ks-color-positive-inverted-alpha-1-base);
  --ks-color-positive-inverted-alpha-1: var(--ks-color-positive-alpha-1-base);
  --ks-color-positive-alpha-2: var(--ks-color-positive-inverted-alpha-2-base);
  --ks-color-positive-inverted-alpha-2: var(--ks-color-positive-alpha-2-base);
  --ks-color-positive-alpha-3: var(--ks-color-positive-inverted-alpha-3-base);
  --ks-color-positive-inverted-alpha-3: var(--ks-color-positive-alpha-3-base);
  --ks-color-positive-alpha-4: var(--ks-color-positive-inverted-alpha-4-base);
  --ks-color-positive-inverted-alpha-4: var(--ks-color-positive-alpha-4-base);
  --ks-color-positive-alpha-5: var(--ks-color-positive-inverted-alpha-5-base);
  --ks-color-positive-inverted-alpha-5: var(--ks-color-positive-alpha-5-base);
  --ks-color-positive-alpha-6: var(--ks-color-positive-inverted-alpha-6-base);
  --ks-color-positive-inverted-alpha-6: var(--ks-color-positive-alpha-6-base);
  --ks-color-positive-alpha-7: var(--ks-color-positive-inverted-alpha-7-base);
  --ks-color-positive-inverted-alpha-7: var(--ks-color-positive-alpha-7-base);
  --ks-color-positive-alpha-8: var(--ks-color-positive-inverted-alpha-8-base);
  --ks-color-positive-inverted-alpha-8: var(--ks-color-positive-alpha-8-base);
  --ks-color-positive-alpha-9: var(--ks-color-positive-inverted-alpha-9-base);
  --ks-color-positive-inverted-alpha-9: var(--ks-color-positive-alpha-9-base);
  --ks-color-positive-to-bg-1: var(--ks-color-positive-inverted-to-bg-1-base);
  --ks-color-positive-inverted-to-bg-1: var(--ks-color-positive-to-bg-1-base);
  --ks-color-positive-to-bg-2: var(--ks-color-positive-inverted-to-bg-2-base);
  --ks-color-positive-inverted-to-bg-2: var(--ks-color-positive-to-bg-2-base);
  --ks-color-positive-to-bg-3: var(--ks-color-positive-inverted-to-bg-3-base);
  --ks-color-positive-inverted-to-bg-3: var(--ks-color-positive-to-bg-3-base);
  --ks-color-positive-to-bg-4: var(--ks-color-positive-inverted-to-bg-4-base);
  --ks-color-positive-inverted-to-bg-4: var(--ks-color-positive-to-bg-4-base);
  --ks-color-positive-to-bg-5: var(--ks-color-positive-inverted-to-bg-5-base);
  --ks-color-positive-inverted-to-bg-5: var(--ks-color-positive-to-bg-5-base);
  --ks-color-positive-to-bg-6: var(--ks-color-positive-inverted-to-bg-6-base);
  --ks-color-positive-inverted-to-bg-6: var(--ks-color-positive-to-bg-6-base);
  --ks-color-positive-to-bg-7: var(--ks-color-positive-inverted-to-bg-7-base);
  --ks-color-positive-inverted-to-bg-7: var(--ks-color-positive-to-bg-7-base);
  --ks-color-positive-to-bg-8: var(--ks-color-positive-inverted-to-bg-8-base);
  --ks-color-positive-inverted-to-bg-8: var(--ks-color-positive-to-bg-8-base);
  --ks-color-positive-to-bg-9: var(--ks-color-positive-inverted-to-bg-9-base);
  --ks-color-positive-inverted-to-bg-9: var(--ks-color-positive-to-bg-9-base);
  --ks-color-informative: var(--ks-color-informative-inverted-base);
  --ks-color-informative-inverted: var(--ks-color-informative-base);
  --ks-color-informative-alpha-1: var(--ks-color-informative-inverted-alpha-1-base);
  --ks-color-informative-inverted-alpha-1: var(--ks-color-informative-alpha-1-base);
  --ks-color-informative-alpha-2: var(--ks-color-informative-inverted-alpha-2-base);
  --ks-color-informative-inverted-alpha-2: var(--ks-color-informative-alpha-2-base);
  --ks-color-informative-alpha-3: var(--ks-color-informative-inverted-alpha-3-base);
  --ks-color-informative-inverted-alpha-3: var(--ks-color-informative-alpha-3-base);
  --ks-color-informative-alpha-4: var(--ks-color-informative-inverted-alpha-4-base);
  --ks-color-informative-inverted-alpha-4: var(--ks-color-informative-alpha-4-base);
  --ks-color-informative-alpha-5: var(--ks-color-informative-inverted-alpha-5-base);
  --ks-color-informative-inverted-alpha-5: var(--ks-color-informative-alpha-5-base);
  --ks-color-informative-alpha-6: var(--ks-color-informative-inverted-alpha-6-base);
  --ks-color-informative-inverted-alpha-6: var(--ks-color-informative-alpha-6-base);
  --ks-color-informative-alpha-7: var(--ks-color-informative-inverted-alpha-7-base);
  --ks-color-informative-inverted-alpha-7: var(--ks-color-informative-alpha-7-base);
  --ks-color-informative-alpha-8: var(--ks-color-informative-inverted-alpha-8-base);
  --ks-color-informative-inverted-alpha-8: var(--ks-color-informative-alpha-8-base);
  --ks-color-informative-alpha-9: var(--ks-color-informative-inverted-alpha-9-base);
  --ks-color-informative-inverted-alpha-9: var(--ks-color-informative-alpha-9-base);
  --ks-color-informative-to-bg-1: var(--ks-color-informative-inverted-to-bg-1-base);
  --ks-color-informative-inverted-to-bg-1: var(--ks-color-informative-to-bg-1-base);
  --ks-color-informative-to-bg-2: var(--ks-color-informative-inverted-to-bg-2-base);
  --ks-color-informative-inverted-to-bg-2: var(--ks-color-informative-to-bg-2-base);
  --ks-color-informative-to-bg-3: var(--ks-color-informative-inverted-to-bg-3-base);
  --ks-color-informative-inverted-to-bg-3: var(--ks-color-informative-to-bg-3-base);
  --ks-color-informative-to-bg-4: var(--ks-color-informative-inverted-to-bg-4-base);
  --ks-color-informative-inverted-to-bg-4: var(--ks-color-informative-to-bg-4-base);
  --ks-color-informative-to-bg-5: var(--ks-color-informative-inverted-to-bg-5-base);
  --ks-color-informative-inverted-to-bg-5: var(--ks-color-informative-to-bg-5-base);
  --ks-color-informative-to-bg-6: var(--ks-color-informative-inverted-to-bg-6-base);
  --ks-color-informative-inverted-to-bg-6: var(--ks-color-informative-to-bg-6-base);
  --ks-color-informative-to-bg-7: var(--ks-color-informative-inverted-to-bg-7-base);
  --ks-color-informative-inverted-to-bg-7: var(--ks-color-informative-to-bg-7-base);
  --ks-color-informative-to-bg-8: var(--ks-color-informative-inverted-to-bg-8-base);
  --ks-color-informative-inverted-to-bg-8: var(--ks-color-informative-to-bg-8-base);
  --ks-color-informative-to-bg-9: var(--ks-color-informative-inverted-to-bg-9-base);
  --ks-color-informative-inverted-to-bg-9: var(--ks-color-informative-to-bg-9-base);
  --ks-color-negative: var(--ks-color-negative-inverted-base);
  --ks-color-negative-inverted: var(--ks-color-negative-base);
  --ks-color-negative-alpha-1: var(--ks-color-negative-inverted-alpha-1-base);
  --ks-color-negative-inverted-alpha-1: var(--ks-color-negative-alpha-1-base);
  --ks-color-negative-alpha-2: var(--ks-color-negative-inverted-alpha-2-base);
  --ks-color-negative-inverted-alpha-2: var(--ks-color-negative-alpha-2-base);
  --ks-color-negative-alpha-3: var(--ks-color-negative-inverted-alpha-3-base);
  --ks-color-negative-inverted-alpha-3: var(--ks-color-negative-alpha-3-base);
  --ks-color-negative-alpha-4: var(--ks-color-negative-inverted-alpha-4-base);
  --ks-color-negative-inverted-alpha-4: var(--ks-color-negative-alpha-4-base);
  --ks-color-negative-alpha-5: var(--ks-color-negative-inverted-alpha-5-base);
  --ks-color-negative-inverted-alpha-5: var(--ks-color-negative-alpha-5-base);
  --ks-color-negative-alpha-6: var(--ks-color-negative-inverted-alpha-6-base);
  --ks-color-negative-inverted-alpha-6: var(--ks-color-negative-alpha-6-base);
  --ks-color-negative-alpha-7: var(--ks-color-negative-inverted-alpha-7-base);
  --ks-color-negative-inverted-alpha-7: var(--ks-color-negative-alpha-7-base);
  --ks-color-negative-alpha-8: var(--ks-color-negative-inverted-alpha-8-base);
  --ks-color-negative-inverted-alpha-8: var(--ks-color-negative-alpha-8-base);
  --ks-color-negative-alpha-9: var(--ks-color-negative-inverted-alpha-9-base);
  --ks-color-negative-inverted-alpha-9: var(--ks-color-negative-alpha-9-base);
  --ks-color-negative-to-bg-1: var(--ks-color-negative-inverted-to-bg-1-base);
  --ks-color-negative-inverted-to-bg-1: var(--ks-color-negative-to-bg-1-base);
  --ks-color-negative-to-bg-2: var(--ks-color-negative-inverted-to-bg-2-base);
  --ks-color-negative-inverted-to-bg-2: var(--ks-color-negative-to-bg-2-base);
  --ks-color-negative-to-bg-3: var(--ks-color-negative-inverted-to-bg-3-base);
  --ks-color-negative-inverted-to-bg-3: var(--ks-color-negative-to-bg-3-base);
  --ks-color-negative-to-bg-4: var(--ks-color-negative-inverted-to-bg-4-base);
  --ks-color-negative-inverted-to-bg-4: var(--ks-color-negative-to-bg-4-base);
  --ks-color-negative-to-bg-5: var(--ks-color-negative-inverted-to-bg-5-base);
  --ks-color-negative-inverted-to-bg-5: var(--ks-color-negative-to-bg-5-base);
  --ks-color-negative-to-bg-6: var(--ks-color-negative-inverted-to-bg-6-base);
  --ks-color-negative-inverted-to-bg-6: var(--ks-color-negative-to-bg-6-base);
  --ks-color-negative-to-bg-7: var(--ks-color-negative-inverted-to-bg-7-base);
  --ks-color-negative-inverted-to-bg-7: var(--ks-color-negative-to-bg-7-base);
  --ks-color-negative-to-bg-8: var(--ks-color-negative-inverted-to-bg-8-base);
  --ks-color-negative-inverted-to-bg-8: var(--ks-color-negative-to-bg-8-base);
  --ks-color-negative-to-bg-9: var(--ks-color-negative-inverted-to-bg-9-base);
  --ks-color-negative-inverted-to-bg-9: var(--ks-color-negative-to-bg-9-base);
  --ks-text-color-default: var(--ks-text-color-default-inverted-base);
  --ks-text-color-default-inverted: var(--ks-text-color-default-base);
  --ks-text-color-default-interactive: var(--ks-text-color-default-inverted-interactive-base);
  --ks-text-color-default-inverted-interactive: var(--ks-text-color-default-interactive-base);
  --ks-text-color-default-interactive-hover: var(--ks-text-color-default-inverted-interactive-hover-base);
  --ks-text-color-default-inverted-interactive-hover: var(--ks-text-color-default-interactive-hover-base);
  --ks-text-color-default-interactive-active: var(--ks-text-color-default-inverted-interactive-active-base);
  --ks-text-color-default-inverted-interactive-active: var(--ks-text-color-default-interactive-active-base);
  --ks-text-color-default-interactive-visited: var(--ks-text-color-default-inverted-interactive-visited-base);
  --ks-text-color-default-inverted-interactive-visited: var(--ks-text-color-default-interactive-visited-base);
  --ks-text-color-interface: var(--ks-text-color-interface-inverted-base);
  --ks-text-color-interface-inverted: var(--ks-text-color-interface-base);
  --ks-text-color-interface-interactive: var(--ks-text-color-interface-inverted-interactive-base);
  --ks-text-color-interface-inverted-interactive: var(--ks-text-color-interface-interactive-base);
  --ks-text-color-interface-interactive-hover: var(--ks-text-color-interface-inverted-interactive-hover-base);
  --ks-text-color-interface-inverted-interactive-hover: var(--ks-text-color-interface-interactive-hover-base);
  --ks-text-color-interface-interactive-active: var(--ks-text-color-interface-inverted-interactive-active-base);
  --ks-text-color-interface-inverted-interactive-active: var(--ks-text-color-interface-interactive-active-base);
  --ks-text-color-interface-interactive-visited: var(--ks-text-color-interface-inverted-interactive-visited-base);
  --ks-text-color-interface-inverted-interactive-visited: var(--ks-text-color-interface-interactive-visited-base);
  --ks-text-color-primary: var(--ks-text-color-primary-inverted-base);
  --ks-text-color-primary-inverted: var(--ks-text-color-primary-base);
  --ks-text-color-primary-interactive: var(--ks-text-color-primary-inverted-interactive-base);
  --ks-text-color-primary-inverted-interactive: var(--ks-text-color-primary-interactive-base);
  --ks-text-color-primary-interactive-hover: var(--ks-text-color-primary-inverted-interactive-hover-base);
  --ks-text-color-primary-inverted-interactive-hover: var(--ks-text-color-primary-interactive-hover-base);
  --ks-text-color-primary-interactive-active: var(--ks-text-color-primary-inverted-interactive-active-base);
  --ks-text-color-primary-inverted-interactive-active: var(--ks-text-color-primary-interactive-active-base);
  --ks-text-color-primary-interactive-visited: var(--ks-text-color-primary-inverted-interactive-visited-base);
  --ks-text-color-primary-inverted-interactive-visited: var(--ks-text-color-primary-interactive-visited-base);
}

@media (min-width: 36em) {
  :root {
    --ks-font-size-display-bp-factor: var(--ks-font-size-display-bp-factor-phone);
    --ks-spacing-xxs-bp-factor: var(--ks-spacing-xxs-bp-factor-phone);
    --ks-spacing-xs-bp-factor: var(--ks-spacing-xs-bp-factor-phone);
    --ks-spacing-s-bp-factor: var(--ks-spacing-s-bp-factor-phone);
    --ks-spacing-m-bp-factor: var(--ks-spacing-m-bp-factor-phone);
    --ks-spacing-l-bp-factor: var(--ks-spacing-l-bp-factor-phone);
    --ks-spacing-xl-bp-factor: var(--ks-spacing-xl-bp-factor-phone);
    --ks-spacing-xxl-bp-factor: var(--ks-spacing-xxl-bp-factor-phone);
  }
}
@media (min-width: 48em) {
  :root {
    --ks-font-size-display-bp-factor: var(--ks-font-size-display-bp-factor-tablet);
    --ks-font-size-copy-bp-factor: var(--ks-font-size-copy-bp-factor-tablet);
    --ks-font-size-interface-bp-factor: var(--ks-font-size-interface-bp-factor-tablet);
    --ks-font-size-mono-bp-factor: var(--ks-font-size-mono-bp-factor-tablet);
    --ks-spacing-xxs-bp-factor: var(--ks-spacing-xxs-bp-factor-tablet);
    --ks-spacing-xs-bp-factor: var(--ks-spacing-xs-bp-factor-tablet);
    --ks-spacing-s-bp-factor: var(--ks-spacing-s-bp-factor-tablet);
    --ks-spacing-m-bp-factor: var(--ks-spacing-m-bp-factor-tablet);
    --ks-spacing-l-bp-factor: var(--ks-spacing-l-bp-factor-tablet);
    --ks-spacing-xl-bp-factor: var(--ks-spacing-xl-bp-factor-tablet);
    --ks-spacing-xxl-bp-factor: var(--ks-spacing-xxl-bp-factor-tablet);
  }
}
@media (min-width: 62em) {
  :root {
    --ks-spacing-xxs-bp-factor: var(--ks-spacing-xxs-bp-factor-laptop);
    --ks-spacing-xs-bp-factor: var(--ks-spacing-xs-bp-factor-laptop);
    --ks-spacing-s-bp-factor: var(--ks-spacing-s-bp-factor-laptop);
    --ks-spacing-m-bp-factor: var(--ks-spacing-m-bp-factor-laptop);
    --ks-spacing-l-bp-factor: var(--ks-spacing-l-bp-factor-laptop);
    --ks-spacing-xl-bp-factor: var(--ks-spacing-xl-bp-factor-laptop);
    --ks-spacing-xxl-bp-factor: var(--ks-spacing-xxl-bp-factor-laptop);
  }
}
@media (min-width: 75em) {
  :root {
    --ks-spacing-xxs-bp-factor: var(--ks-spacing-xxs-bp-factor-desktop);
    --ks-spacing-xs-bp-factor: var(--ks-spacing-xs-bp-factor-desktop);
    --ks-spacing-s-bp-factor: var(--ks-spacing-s-bp-factor-desktop);
    --ks-spacing-m-bp-factor: var(--ks-spacing-m-bp-factor-desktop);
    --ks-spacing-l-bp-factor: var(--ks-spacing-l-bp-factor-desktop);
    --ks-spacing-xl-bp-factor: var(--ks-spacing-xl-bp-factor-desktop);
    --ks-spacing-xxl-bp-factor: var(--ks-spacing-xxl-bp-factor-desktop);
  }
}

/*# sourceMappingURL=index.css.map */