/* EFIBCA Design System — last modified Apr 14, 2026 at 12:22 pm */

:root {

  /* ===  raw/color  === */

  /* brand-primary */
  --ds-raw-color-brand-primary-25: hsl(229 6% 97%);
  --ds-raw-color-brand-primary-50: hsl(229 11% 93%);
  --ds-raw-color-brand-primary-100: hsl(229 21% 88%);
  --ds-raw-color-brand-primary-120: hsl(229 25% 86%);
  --ds-raw-color-brand-primary-200: hsl(229 37% 80%);
  --ds-raw-color-brand-primary-300: hsl(229 46% 70%);
  --ds-raw-color-brand-primary-400: hsl(229 49% 60%);
  --ds-raw-color-brand-primary-500: hsl(229 49% 50%);
  --ds-raw-color-brand-primary-600: hsl(229 49% 40%);
  --ds-raw-color-brand-primary-700: hsl(229 49% 30%);
  --ds-raw-color-brand-primary-750: hsl(229 49% 25%);
  --ds-raw-color-brand-primary-800: hsl(229 49% 20%);
  --ds-raw-color-brand-primary-875: hsl(229 49% 14%);
  --ds-raw-color-brand-primary-900: hsl(229 49% 12%);
  --ds-raw-color-brand-primary-950: hsl(229 49% 7%);

  /* brand-secondary */
  --ds-raw-color-brand-secondary-50: hsl(30 86% 93%);
  --ds-raw-color-brand-secondary-100: hsl(30 86% 88%);
  --ds-raw-color-brand-secondary-200: hsl(30 86% 80%);
  --ds-raw-color-brand-secondary-300: hsl(30 86% 70%);
  --ds-raw-color-brand-secondary-400: hsl(30 86% 60%);
  --ds-raw-color-brand-secondary-500: hsl(30 86% 50%);
  --ds-raw-color-brand-secondary-600: hsl(30 86% 40%);
  --ds-raw-color-brand-secondary-700: hsl(30 86% 30%);
  --ds-raw-color-brand-secondary-800: hsl(30 86% 20%);
  --ds-raw-color-brand-secondary-900: hsl(30 86% 12%);
  --ds-raw-color-brand-secondary-950: hsl(30 86% 7%);

  /* neutral */
  --ds-raw-color-neutral-0: hsl(219 16% 100%);
  --ds-raw-color-neutral-40: hsl(219 16% 94%);
  --ds-raw-color-neutral-50: hsl(219 16% 93%);
  --ds-raw-color-neutral-75: hsl(219 16% 91%);
  --ds-raw-color-neutral-100: hsl(219 16% 88%);
  --ds-raw-color-neutral-200: hsl(219 16% 80%);
  --ds-raw-color-neutral-300: hsl(219 16% 70%);
  --ds-raw-color-neutral-400: hsl(219 16% 60%);
  --ds-raw-color-neutral-500: hsl(219 16% 50%);
  --ds-raw-color-neutral-600: hsl(219 16% 40%);
  --ds-raw-color-neutral-700: hsl(219 16% 30%);
  --ds-raw-color-neutral-800: hsl(219 16% 20%);
  --ds-raw-color-neutral-850: hsl(219 16% 16%);
  --ds-raw-color-neutral-900: hsl(219 16% 12%);
  --ds-raw-color-neutral-950: hsl(219 16% 7%);
  --ds-raw-color-neutral-1000: hsl(219 16% 0%);

  /* link */
  --ds-raw-color-link-50: hsl(223 100% 93%);
  --ds-raw-color-link-100: hsl(223 100% 88%);
  --ds-raw-color-link-200: hsl(223 100% 80%);
  --ds-raw-color-link-300: hsl(223 100% 70%);
  --ds-raw-color-link-400: hsl(223 100% 60%);
  --ds-raw-color-link-500: hsl(223 100% 50%);
  --ds-raw-color-link-600: hsl(223 100% 40%);
  --ds-raw-color-link-700: hsl(223 100% 30%);
  --ds-raw-color-link-800: hsl(223 100% 20%);
  --ds-raw-color-link-900: hsl(223 100% 12%);
  --ds-raw-color-link-950: hsl(223 100% 7%);

  /* a11y */
  --ds-raw-color-a11y-50: hsl(30 86% 93%);
  --ds-raw-color-a11y-100: hsl(30 86% 88%);
  --ds-raw-color-a11y-200: hsl(30 86% 80%);
  --ds-raw-color-a11y-300: hsl(30 86% 70%);
  --ds-raw-color-a11y-400: hsl(30 86% 60%);
  --ds-raw-color-a11y-500: hsl(30 86% 50%);
  --ds-raw-color-a11y-600: hsl(30 86% 40%);
  --ds-raw-color-a11y-700: hsl(30 86% 30%);
  --ds-raw-color-a11y-800: hsl(30 86% 20%);
  --ds-raw-color-a11y-900: hsl(30 86% 12%);
  --ds-raw-color-a11y-950: hsl(30 86% 7%);

  /* negative */
  --ds-raw-color-negative-50: hsl(13 100% 93%);
  --ds-raw-color-negative-100: hsl(13 100% 88%);
  --ds-raw-color-negative-200: hsl(13 100% 80%);
  --ds-raw-color-negative-300: hsl(13 100% 70%);
  --ds-raw-color-negative-400: hsl(13 100% 60%);
  --ds-raw-color-negative-500: hsl(13 100% 50%);
  --ds-raw-color-negative-600: hsl(13 100% 40%);
  --ds-raw-color-negative-700: hsl(13 100% 30%);
  --ds-raw-color-negative-800: hsl(13 100% 20%);
  --ds-raw-color-negative-900: hsl(13 100% 12%);
  --ds-raw-color-negative-950: hsl(13 100% 7%);

  /* positive */
  --ds-raw-color-positive-50: hsl(81 100% 93%);
  --ds-raw-color-positive-100: hsl(81 100% 88%);
  --ds-raw-color-positive-200: hsl(81 100% 80%);
  --ds-raw-color-positive-300: hsl(81 100% 70%);
  --ds-raw-color-positive-400: hsl(81 100% 60%);
  --ds-raw-color-positive-500: hsl(81 100% 50%);
  --ds-raw-color-positive-600: hsl(81 100% 40%);
  --ds-raw-color-positive-700: hsl(81 100% 30%);
  --ds-raw-color-positive-800: hsl(81 100% 20%);
  --ds-raw-color-positive-900: hsl(81 100% 12%);
  --ds-raw-color-positive-950: hsl(81 100% 7%);

  /* ===  raw/border/radius  === */

  --ds-raw-border-radius-none: 0;
  --ds-raw-border-radius-sm: 3px;
  --ds-raw-border-radius-md: 5px;
  --ds-raw-border-radius-lg: 12px;
  --ds-raw-border-radius-xl: 24px;
  --ds-raw-border-radius-full: 100vw;

  /* ===  raw/border/width  === */

  --ds-raw-border-width-1: 1px;
  --ds-raw-border-width-2: 2px;
  --ds-raw-border-width-3: 3px;
  --ds-raw-border-width-4: 4px;

  /* ===  raw/typography/font/size  === */

  --ds-raw-typography-font-size-xs: 0.8438rem;
  --ds-raw-typography-font-size-sm: 0.9844rem;
  --ds-raw-typography-font-size-md: 1.125rem;
  --ds-raw-typography-font-size-lg: 1.2656rem;
  --ds-raw-typography-font-size-xl: 1.4063rem;
  --ds-raw-typography-font-size-2xl: 1.6875rem;
  --ds-raw-typography-font-size-3xl: 2.1094rem;
  --ds-raw-typography-font-size-4xl: 2.8125rem;

  /* ===  raw/typography/font/weight  === */

  --ds-raw-typography-font-weight-regular: 400;
  --ds-raw-typography-font-weight-medium: 500;
  --ds-raw-typography-font-weight-semi-bold: 600;
  --ds-raw-typography-font-weight-bold: 700;

  /* ===  raw/typography/font/family  === */

  --ds-raw-typography-font-family-display: 'Libre Caslon Text', serif;
  --ds-raw-typography-font-family-default: 'Maven Pro', sans-serif;

  /* ===  raw/typography/leading  === */

  --ds-raw-typography-leading-none: 1;
  --ds-raw-typography-leading-tight: 1.25;
  --ds-raw-typography-leading-snug: 1.375;
  --ds-raw-typography-leading-normal: 1.5;
  --ds-raw-typography-leading-relaxed: 1.625;
  --ds-raw-typography-leading-loose: 2;

  /* ===  raw/typography/letter-spacing  === */

  --ds-raw-typography-letter-spacing-none: 0;
  --ds-raw-typography-letter-spacing-wide: 0.05rem;
  --ds-raw-typography-letter-spacing-wider: 0.1rem;

  /* ===  raw/box-shadow  === */

  --ds-raw-box-shadow-sm: 0px 3px 16px 4px light-dark(color-mix(in srgb, var(--ds-raw-color-brand-primary-600) 15%, transparent), color-mix(in srgb, var(--ds-raw-color-neutral-300) 15%, transparent));
  --ds-raw-box-shadow-lg: 0px 6px 24px 0px light-dark(color-mix(in srgb, var(--ds-raw-color-neutral-1000) 10%, transparent), color-mix(in srgb, var(--ds-raw-color-neutral-0) 10%, transparent));

  /* ===  raw/spacing  === */

  --ds-raw-spacing-none: 0rem;
  --ds-raw-spacing-2xs: 0.25rem;
  --ds-raw-spacing-xs: 0.375rem;
  --ds-raw-spacing-sm: 0.5rem;
  --ds-raw-spacing-md: 1rem;
  --ds-raw-spacing-lg: 1.5rem;
  --ds-raw-spacing-xl: 2rem;
  --ds-raw-spacing-2xl: 3rem;
  --ds-raw-spacing-3xl: 4rem;
  --ds-raw-spacing-icon-gap: 1ch;

  /* ===  raw/opacity  === */

  --ds-raw-opacity-50: 0.5;

  /* ===  semantic  === */


  /* ===  semantic/base  === */

  --ds-semantic-base-font-family: var(--ds-raw-typography-font-family-default);
  --ds-semantic-base-font-size: var(--ds-raw-typography-font-size-md);
  --ds-semantic-base-font-weight-regular: var(--ds-raw-typography-font-weight-regular);
  --ds-semantic-base-font-weight-semi-bold: var(--ds-raw-typography-font-weight-semi-bold);
  --ds-semantic-base-font-weight-bold: var(--ds-raw-typography-font-weight-bold);

  /* ===  semantic/whitespace  === */

  --ds-semantic-whitespace-box-block-compact: var(--ds-raw-spacing-md);
  --ds-semantic-whitespace-box-inline-compact: var(--ds-raw-spacing-lg);
  --ds-semantic-whitespace-box-block-relaxed: var(--ds-raw-spacing-lg);
  --ds-semantic-whitespace-box-inline-relaxed: var(--ds-raw-spacing-xl);
  --ds-semantic-whitespace-grid-gap-md: var(--ds-raw-spacing-md);
  --ds-semantic-whitespace-section-break: clamp(1rem, 6svh, 5rem);
  --ds-semantic-whitespace-icon-gap: var(--ds-raw-spacing-xs);

  /* ===  semantic/decoration  === */

  --ds-semantic-decoration-box-shadow-default: var(--ds-raw-box-shadow-sm);

  /* ===  semantic/grid  === */

  --ds-semantic-grid-gap-sm: var(--ds-raw-spacing-sm);
  --ds-semantic-grid-gap-lg: var(--ds-raw-spacing-lg);

  /* ===  semantic/ui  === */

  --ds-semantic-ui-drawer-width:  16rem ;
  --ds-semantic-ui-padding-block-lg: var(--ds-raw-spacing-xl);
  --ds-semantic-ui-padding-block-default: var(--ds-raw-spacing-md);
  --ds-semantic-ui-padding-block-sm: var(--ds-raw-spacing-sm);
  --ds-semantic-ui-padding-inline-lg: var(--ds-raw-spacing-xl);
  --ds-semantic-ui-padding-inline-default: var(--ds-raw-spacing-md);
  --ds-semantic-ui-padding-inline-sm: var(--ds-raw-spacing-sm);
  --ds-semantic-ui-column-gap-lg: var(--ds-raw-spacing-xl);
  --ds-semantic-ui-column-gap-default: var(--ds-raw-spacing-md);
  --ds-semantic-ui-column-gap-sm: var(--ds-raw-spacing-sm);
  --ds-semantic-ui-row-gap-lg: var(--ds-raw-spacing-xl);
  --ds-semantic-ui-row-gap-default: var(--ds-raw-spacing-md);
  --ds-semantic-ui-row-gap-sm: var(--ds-raw-spacing-sm);
  --ds-semantic-ui-radius-default: var(--ds-raw-border-radius-lg);
  --ds-semantic-ui-radius-button-default: var(--ds-raw-border-radius-sm);
  --ds-semantic-ui-radius-input-field-default: var(--ds-raw-border-radius-sm);
  --ds-semantic-ui-disabled-opacity: var(--ds-raw-opacity-50);
  --ds-semantic-ui-box-shadow-default: var(--ds-raw-box-shadow-sm);
  --ds-semantic-ui-section-break-default: var(--ds-raw-spacing-2xl);
  --ds-semantic-ui-section-break-within-default: var(--ds-raw-spacing-lg);
  --ds-semantic-ui-block-break-default: var(--ds-raw-spacing-md);
  --ds-semantic-ui-block-break-xl: var(--ds-raw-spacing-3xl);
  --ds-semantic-ui-block-break-within-default: var(--ds-raw-spacing-sm);
  --ds-semantic-ui-field-padding-inline-default: var(--ds-raw-spacing-md);
  --ds-semantic-ui-field-padding-block-default: 0.625rem;
  --ds-semantic-ui-outline-width-default: 2px;
  --ds-semantic-ui-outline-width-focus: 4px;
  --ds-semantic-ui-outline-width-bold: 8px;

  /* ===  semantic/page  === */

  --ds-semantic-page-max-width: 80rem;
  --ds-semantic-page-margin-block: var(--ds-raw-spacing-none);
  --ds-semantic-page-margin-inline: auto;
  --ds-semantic-page-padding-block: 5vh;

  /* ===  semantic/fx  === */

  --ds-semantic-fx-filter-hover-brighten: brightness(1.13);
  --ds-semantic-fx-transition-all: all 0.2s ease-in-out;
  --ds-semantic-fx-transition-all-fast: all 0.1s ease-in-out;

  /* ===  semantic/colors  === */

  --ds-semantic-colors-background-theme-switcher: light-dark(var(--ds-raw-color-brand-primary-800), var(--ds-raw-color-brand-primary-800));
  --ds-semantic-colors-content-theme-switcher: light-dark(var(--ds-raw-color-brand-primary-200), var(--ds-raw-color-brand-primary-200));
  --ds-semantic-colors-a11y-focus: light-dark(var(--ds-raw-color-a11y-500), var(--ds-raw-color-a11y-200));
  --ds-semantic-colors-outline-default: light-dark(var(--ds-raw-color-neutral-200), var(--ds-raw-color-neutral-600));
  --ds-semantic-colors-background-page: light-dark(var(--ds-raw-color-neutral-0), var(--ds-raw-color-brand-primary-875));
  --ds-semantic-colors-background-page-surface: light-dark(var(--ds-raw-color-brand-primary-25), var(--ds-raw-color-brand-primary-800));
  --ds-semantic-colors-content-page: light-dark(var(--ds-raw-color-neutral-700), var(--ds-raw-color-brand-primary-200));
  --ds-semantic-colors-color-default-accent: light-dark(var(--ds-raw-color-brand-secondary-500), var(--ds-raw-color-brand-secondary-500));
  --ds-semantic-colors-content-page-surface: light-dark(var(--ds-raw-color-brand-primary-800), var(--ds-raw-color-brand-primary-200));

  /* ===  semantic/typography  === */

  --ds-semantic-typography-block-break-default: min(3vh, 1lh);
  --ds-semantic-typography-block-break-lg: min(5.25vh, 1.75lh);
  --ds-semantic-typography-block-break-sm: min(1.5vh, 0.75lh);
  --ds-semantic-typography-block-break-xs: min(0.75vh, 0.25lh);
  --ds-semantic-typography-text-max-width: 40rem;;
  --ds-semantic-typography-heading-text-wrap-default: balance;
  --ds-semantic-typography-hyphens-default: auto;
  --ds-semantic-typography-font-family-body-default: var(--ds-raw-typography-font-family-default);
  --ds-semantic-typography-font-weight-semi-bold: var(--ds-raw-typography-font-weight-semi-bold);
}

[data-skin] {
  --ds-skin-background: transparent;
  --ds-skin-text: inherit;
  --ds-skin-link: inherit;
  --ds-skin-accent: inherit;
  --ds-skin-on-accent: inherit;
  --ds-skin-border: inherit;
}

[data-skin="base"] {
  --ds-skin-background: var(--ds-semantic-colors-background-page);
  --ds-skin-text: light-dark(var(--ds-raw-color-neutral-700), var(--ds-raw-color-neutral-200));
  --ds-skin-link: light-dark(var(--ds-raw-color-a11y-600), var(--ds-raw-color-a11y-300));
  --ds-skin-accent: light-dark(var(--ds-raw-color-brand-primary-800), var(--ds-raw-color-brand-primary-800));
  --ds-skin-on-accent: light-dark(var(--ds-raw-color-brand-primary-50), var(--ds-raw-color-brand-primary-50));
  --ds-skin-border: light-dark(var(--ds-raw-color-neutral-300), var(--ds-raw-color-neutral-600));
}

[data-skin="page"] {
  --ds-skin-background: var(--ds-semantic-colors-background-page);
  --ds-skin-text: var(--ds-semantic-colors-content-page);
  --ds-skin-link: light-dark(var(--ds-raw-color-link-600), var(--ds-raw-color-link-200));
  --ds-skin-accent: light-dark(var(--ds-raw-color-brand-primary-700), var(--ds-raw-color-brand-primary-300));
  --ds-skin-on-accent: light-dark(var(--ds-raw-color-brand-primary-50), var(--ds-raw-color-brand-primary-800));
  --ds-skin-border: light-dark(var(--ds-raw-color-neutral-300), var(--ds-raw-color-neutral-600));
}

[data-skin="teaser"] {
  --ds-skin-background: light-dark(var(--ds-raw-color-brand-primary-100), var(--ds-raw-color-neutral-700));
  --ds-skin-text: light-dark(var(--ds-raw-color-neutral-700), var(--ds-raw-color-neutral-50));
  --ds-skin-accent: light-dark(var(--ds-raw-color-brand-primary-750), var(--ds-raw-color-brand-primary-750));
  --ds-skin-on-accent: light-dark(var(--ds-raw-color-brand-primary-50), var(--ds-raw-color-brand-primary-100));
  --ds-skin-border: light-dark(var(--ds-raw-color-neutral-0), var(--ds-raw-color-neutral-600));
}

[data-skin="footer"] {
  --ds-skin-background: light-dark(var(--ds-raw-color-brand-primary-750), var(--ds-raw-color-brand-primary-900));
  --ds-skin-text: light-dark(var(--ds-raw-color-neutral-100), var(--ds-raw-color-neutral-100));
  --ds-skin-link: light-dark(var(--ds-raw-color-a11y-300), var(--ds-raw-color-a11y-200));
}

[data-skin="header"] {
  --ds-skin-background: light-dark(var(--ds-raw-color-neutral-0), var(--ds-raw-color-brand-primary-900));
}

.comp-logo {
  --ds-component-logo-width-compact: 8rem;
  --ds-component-logo-width-relaxed: 12rem;
  --ds-component-logo-color-secondary: light-dark(var(--ds-raw-color-brand-secondary-500), var(--ds-raw-color-brand-secondary-500));
  --ds-component-logo-color-primary: light-dark(var(--ds-raw-color-brand-primary-750), var(--ds-raw-color-brand-primary-400));
  --ds-component-logo-font-size-claim-compact: 10px;
  --ds-component-logo-font-size-claim-relaxed: var(--ds-raw-typography-font-size-md);
  --ds-component-logo-color-claim: light-dark(var(--ds-raw-color-neutral-600), var(--ds-raw-color-neutral-300));
}

.comp-searchfield {
  --ds-component-searchfield-button-width: 2.375rem;
  --ds-component-searchfield-button-height: 2.375rem;
  --ds-component-searchfield-color-background-button: light-dark(var(--ds-raw-color-brand-primary-750), var(--ds-raw-color-brand-primary-300));
  --ds-component-searchfield-color-content-button: light-dark(var(--ds-raw-color-brand-primary-50), var(--ds-raw-color-brand-primary-900));
  --ds-component-searchfield-radius: var(--ds-raw-border-radius-full);
  --ds-component-searchfield-field-padding-inline: var(--ds-semantic-ui-field-padding-inline-default);
  --ds-component-searchfield-field-padding-block: var(--ds-semantic-ui-field-padding-block-default);
  --ds-component-searchfield-filter-hover: var(--ds-semantic-fx-filter-hover-brighten);
  --ds-component-searchfield-outline-width-default: var(--ds-semantic-ui-outline-width-default);
  --ds-component-searchfield-outline-width-focus: var(--ds-semantic-ui-outline-width-focus);
  --ds-component-searchfield-outline-color: var(--ds-semantic-colors-outline-default);
  --ds-component-searchfield-gap: 12px;
  --ds-component-searchfield-min-width: 16rem;
}

.comp-drawer {
  --ds-component-drawer-padding-block: max(1rem, 4svh);
  --ds-component-drawer-padding-inline-end: var(--ds-raw-spacing-2xl);
}

.comp-nav {
  --ds-component-nav-link-padding-inline: var(--ds-raw-spacing-md);
  --ds-component-nav-link-radius: 2px;
  --ds-component-nav-link-gap: 2px;
  --ds-component-nav-link-active-border-width: 3px;
  --ds-component-nav-link-active-font-weight: var(--ds-raw-typography-font-weight-semi-bold);
  --ds-component-nav-link-transition: var(--ds-semantic-fx-transition-all);
  --ds-component-nav-gap: var(--ds-raw-spacing-lg);
  --ds-component-nav-category-text-transform: uppercase;
  --ds-component-nav-category-margin-block-end: var(--ds-raw-spacing-md);
  --ds-component-nav-category-font-weight: var(--ds-raw-typography-font-weight-semi-bold);
  --ds-component-nav-color-background-hover: light-dark(var(--ds-raw-color-brand-primary-200), var(--ds-raw-color-brand-primary-700));
  --ds-component-nav-color-content-hover: light-dark(var(--ds-raw-color-brand-primary-700), var(--ds-raw-color-brand-primary-100));
  --ds-component-nav-color-content-current: light-dark(var(--ds-raw-color-brand-primary-750), var(--ds-raw-color-brand-primary-100));
  --ds-component-nav-color-background-current: light-dark(var(--ds-raw-color-brand-primary-100), var(--ds-raw-color-brand-primary-600));
  --ds-component-nav-color-background-open: light-dark(var(--ds-raw-color-neutral-75), var(--ds-raw-color-neutral-700));
  --ds-component-nav-color-border: transparent;
  --ds-component-nav-color-border-current: light-dark(var(--ds-raw-color-brand-secondary-500), var(--ds-raw-color-brand-secondary-500));
  --ds-component-nav-color-border-open: light-dark(var(--ds-raw-color-neutral-75), var(--ds-raw-color-neutral-700));
  --ds-component-nav-switcher-padding-block: var(--ds-raw-spacing-md);
  --ds-component-nav-list-level-0-padding-inline: var(--ds-raw-spacing-none);
  --ds-component-nav-list-level-0-margin-inline: var(--ds-raw-spacing-none);
  --ds-component-nav-list-level1-padding-inline: var(--ds-raw-spacing-md);
  --ds-component-nav-list-level1-padding-block: var(--ds-raw-spacing-sm);
  --ds-component-nav-list-level2-padding-inline: var(--ds-raw-spacing-md);
  --ds-component-nav-list-level2-padding-block: var(--ds-raw-spacing-xs);
  --ds-component-nav-letter-spacing: var(--ds-raw-typography-letter-spacing-wide);
}

.comp-hero {
  --ds-component-hero-color-accent-primary: light-dark(var(--ds-raw-color-brand-primary-750), var(--ds-raw-color-brand-primary-700));
  --ds-component-hero-color-accent-secondary: light-dark(var(--ds-raw-color-brand-secondary-500), var(--ds-raw-color-brand-secondary-500));
  --ds-component-hero-radius: var(--ds-raw-border-radius-xl);
  --ds-component-hero-margin-block-end: 1rem;
  --ds-component-hero-rotation-step: 3deg;
  --ds-component-hero-translate-block: 8px;
  --ds-component-hero-translate-inline: 8px;
  --ds-component-hero-color-background-loading: light-dark(var(--ds-raw-color-neutral-300), var(--ds-raw-color-neutral-600));
}

.comp-content {
  --ds-component-content-padding-inline-extended: 105px;
  --ds-component-content-padding-inline-default: var(--ds-semantic-ui-padding-inline-default);
  --ds-component-content-padding-inline-lg: var(--ds-semantic-ui-padding-inline-lg);
  --ds-component-content-max-width: 56rem;
  --ds-component-content-margin-block-start: max(1rem, 3svh);
}

.comp-button {
  --ds-component-button-color-background: light-dark(var(--ds-raw-color-brand-primary-750), var(--ds-raw-color-brand-primary-300));
  --ds-component-button-color-background-hover: light-dark(var(--ds-raw-color-brand-primary-750), var(--ds-raw-color-brand-primary-300));
  --ds-component-button-color-content: light-dark(var(--ds-raw-color-brand-primary-100), var(--ds-raw-color-brand-primary-900));
  --ds-component-button-outline-color: light-dark(var(--ds-raw-color-brand-primary-750), var(--ds-raw-color-brand-primary-300));
  --ds-component-button-outline-color-focus: var(--ds-semantic-colors-a11y-focus);
  --ds-component-button-outline-width: 2px;
  --ds-component-button-outline-width-focus: 4px;
  --ds-component-button-radius: var(--ds-raw-border-radius-md);
  --ds-component-button-height: var(--ds-raw-spacing-xl);
  --ds-component-button-leading: var(--ds-raw-typography-leading-tight);
  --ds-component-button-padding-block: var(--ds-raw-spacing-2xs);
  --ds-component-button-padding-inline: var(--ds-raw-spacing-md);
  --ds-component-button-gap-icon: var(--ds-raw-spacing-sm);
  --ds-component-button-icon-width: 1rem;
  --ds-component-button-icon-height: 1rem;
  --ds-component-button-transition: var(--ds-semantic-fx-transition-all);
  --ds-component-button-filter-hover: var(--ds-semantic-fx-filter-hover-brighten);
  --ds-component-button-font-size: var(--ds-raw-typography-font-size-md);
  --ds-component-button-color-icon: currentColor;
  --ds-component-button-min-width: none;
}

.comp-button.is-ui-button {
  --ds-component-button-padding-block: var(--ds-raw-spacing-none);
  --ds-component-button-font-size: var(--ds-raw-typography-font-size-xs);
  --ds-component-button-padding-inline: var(--ds-semantic-ui-padding-inline-sm);
  --ds-component-button-height: var(--ds-raw-spacing-lg);
  --ds-component-button-color-background: var(--ds-semantic-colors-background-page);
  --ds-component-button-color-content: light-dark(var(--ds-raw-color-neutral-700), var(--ds-raw-color-neutral-100));
  --ds-component-button-outline-color: light-dark(var(--ds-raw-color-neutral-100), var(--ds-raw-color-neutral-700));
  --ds-component-button-color-icon: light-dark(var(--ds-raw-color-brand-primary-400), var(--ds-raw-color-brand-primary-300));
  --ds-component-button-color-background-hover: var(--ds-semantic-colors-background-page-surface);
}

.comp-button.is-minimal {
  --ds-component-button-color-background: transparent;
  --ds-component-button-color-background-hover: transparent;
  --ds-component-button-color-content: light-dark(var(--ds-raw-color-brand-primary-750), var(--ds-raw-color-neutral-200));
  --ds-component-button-outline-color: light-dark(var(--ds-raw-color-neutral-200), var(--ds-raw-color-neutral-600));
}

.comp-button.is-resource {
  --ds-component-button-color-background: transparent;
  --ds-component-button-color-content: light-dark(var(--ds-raw-color-brand-primary-750), var(--ds-raw-color-neutral-200));
  --ds-component-button-outline-color: light-dark(var(--ds-raw-color-brand-primary-500), var(--ds-raw-color-brand-primary-400));
  --ds-component-button-icon-width: 1.5rem;
  --ds-component-button-icon-height: 1.5rem;
  --ds-component-button-padding-block: 0.625rem;
  --ds-component-button-color-icon: light-dark(var(--ds-raw-color-brand-secondary-500), var(--ds-raw-color-brand-secondary-400));
  --ds-component-button-min-width: 20ch;
  --ds-component-button-color-background-hover: transparent;
}

.comp-button.is-resource-of-multiple {
  --ds-component-button-color-background: transparent;
  --ds-component-button-color-background-hover: light-dark(var(--ds-raw-color-brand-primary-120), var(--ds-raw-color-brand-primary-800));
  --ds-component-button-color-content: light-dark(var(--ds-raw-color-brand-primary-750), var(--ds-raw-color-neutral-200));
  --ds-component-button-outline-color: transparent;
  --ds-component-button-icon-width: 1.25rem;
  --ds-component-button-icon-height: 1.25rem;
  --ds-component-button-padding-block: var(--ds-raw-spacing-xs);
  --ds-component-button-color-icon: light-dark(var(--ds-raw-color-brand-secondary-500), var(--ds-raw-color-brand-secondary-400));
  --ds-component-button-padding-inline: var(--ds-raw-spacing-xs);
}

.comp-form {
  --ds-component-form-row-gap-default: var(--ds-raw-spacing-md);
  --ds-component-form-column-gap-default: var(--ds-raw-spacing-md);
  --ds-component-form-border-radius-field: var(--ds-semantic-ui-radius-input-field-default);
  --ds-component-form-color-background-field: var(--ds-semantic-colors-background-page);
  --ds-component-form-color-background-field-focus: var(--ds-semantic-colors-background-page-surface);
  --ds-component-form-color-background-field-disabled: var(--ds-semantic-colors-background-page);
  --ds-component-form-color-background-field-selection: light-dark(var(--ds-raw-color-brand-secondary-200), var(--ds-raw-color-brand-secondary-200));
  --ds-component-form-color-field: light-dark(var(--ds-raw-color-brand-primary-750), var(--ds-raw-color-neutral-100));
  --ds-component-form-color-field-focus: light-dark(var(--ds-raw-color-brand-primary-900), var(--ds-raw-color-brand-primary-100));
  --ds-component-form-color-field-selection: light-dark(var(--ds-raw-color-brand-primary-750), var(--ds-raw-color-brand-primary-750));
  --ds-component-form-label-color: light-dark(var(--ds-raw-color-brand-primary-700), var(--ds-raw-color-brand-primary-300));
  --ds-component-form-label-margin-block: var(--ds-raw-spacing-xs);
  --ds-component-form-padding-field-inline: var(--ds-semantic-ui-field-padding-inline-default);
  --ds-component-form-padding-field-block: var(--ds-semantic-ui-field-padding-block-default);
  --ds-component-form-outline-width-default: var(--ds-semantic-ui-outline-width-default);
  --ds-component-form-outline-width-focus: var(--ds-semantic-ui-outline-width-focus);
  --ds-component-form-outline-color: var(--ds-semantic-colors-a11y-focus);
  --ds-component-form-outline-color-default: var(--ds-semantic-colors-outline-default);
  --ds-component-form-outline-color-focus: var(--ds-semantic-colors-a11y-focus);
  --ds-component-form-disabled-opacity: var(--ds-semantic-ui-disabled-opacity);
}

.comp-header {
  --ds-component-header-padding-block-compact: var(--ds-semantic-ui-padding-block-sm);
  --ds-component-header-padding-block-relaxed: var(--ds-semantic-ui-padding-block-default);
  --ds-component-header-padding-inline-compact: var(--ds-semantic-ui-padding-inline-sm);
  --ds-component-header-padding-inline-relaxed: var(--ds-semantic-ui-padding-inline-default);
}

.comp-teaser {
  --ds-component-teaser-font-size-headline: var(--ds-raw-typography-font-size-md);
  --ds-component-teaser-font-family-headline: var(--ds-raw-typography-font-family-default);
  --ds-component-teaser-font-weight-headline: var(--ds-raw-typography-font-weight-regular);
  --ds-component-teaser-line-height-headline: var(--ds-raw-typography-leading-tight);
  --ds-component-teaser-outline-color-hover: light-dark(var(--ds-raw-color-brand-secondary-500), var(--ds-raw-color-brand-secondary-500));
  --ds-component-teaser-border-width: var(--ds-raw-border-width-4);
  --ds-component-teaser-radius: var(--ds-raw-border-radius-xl);
  --ds-component-teaser-transition: var(--ds-semantic-fx-transition-all);
  --ds-component-teaser-filter-hover: var(--ds-semantic-fx-filter-hover-brighten);
  --ds-component-teaser-box-shadow: var(--ds-raw-box-shadow-sm);
  --ds-component-teaser-outline-offset: var(--ds-raw-border-width-2);
  --ds-component-teaser-padding-block-headline: var(--ds-raw-spacing-sm);
  --ds-component-teaser-color-background: light-dark(var(--ds-raw-color-brand-primary-700), var(--ds-raw-color-brand-primary-700));
  --ds-component-teaser-color-content: light-dark(var(--ds-raw-color-brand-primary-50), var(--ds-raw-color-brand-primary-50));
}

.comp-quote {
  --ds-component-quote-picture-radius: var(--ds-raw-border-radius-full);
  --ds-component-quote-footer-margin-block-start: var(--ds-raw-spacing-sm);
  --ds-component-quote-blockquote-font-family: var(--ds-raw-typography-font-family-default);
  --ds-component-quote-blockquote-font-size: var(--ds-raw-typography-font-size-lg);
  --ds-component-quote-blockquote-font-weight: var(--ds-raw-typography-font-weight-regular);
  --ds-component-quote-footer-font-family: var(--ds-raw-typography-font-family-default);
  --ds-component-quote-footer-font-size: var(--ds-raw-typography-font-size-md);
  --ds-component-quote-footer-font-weight: var(--ds-raw-typography-font-weight-semi-bold);
  --ds-component-quote-picture-max-size: 12rem;
  --ds-component-quote-color-background: var(--ds-semantic-colors-background-page);
  --ds-component-quote-color-content: light-dark(var(--ds-raw-color-brand-primary-600), var(--ds-raw-color-brand-primary-200));
  --ds-component-quote-column-gap: var(--ds-raw-spacing-xl);
  --ds-component-quote-padding-block: var(--ds-raw-spacing-md);
  --ds-component-quote-padding-inline: var(--ds-raw-spacing-md);
  --ds-component-quote-radius: var(--ds-raw-border-radius-xl);
  --ds-component-quote-max-width: 36rem;
  --ds-component-quote-picture-outline-width: 9px;
  --ds-component-quote-svg-width: 5rem;
}

.comp-infobox {
  --ds-component-infobox-color-background: var(--ds-semantic-colors-background-page-surface);
  --ds-component-infobox-color-content: light-dark(var(--ds-raw-color-neutral-600), var(--ds-raw-color-neutral-200));
  --ds-component-infobox-radius: var(--ds-semantic-ui-radius-default);
  --ds-component-infobox-padding: var(--ds-raw-spacing-md);
  --ds-component-infobox-font-size: var(--ds-raw-typography-font-size-sm);
}

.comp-member {
  --ds-component-member-block-break: var(--ds-raw-spacing-md);
}

.comp-message {
  --ds-component-message-color-background: light-dark(var(--ds-raw-color-brand-primary-200), var(--ds-raw-color-neutral-700));
  --ds-component-message-color-content: light-dark(var(--ds-raw-color-brand-primary-800), var(--ds-raw-color-brand-primary-100));
  --ds-component-message-radius: var(--ds-semantic-ui-radius-default);
  --ds-component-message-padding-block: var(--ds-semantic-ui-field-padding-block-default);
  --ds-component-message-padding-inline: var(--ds-semantic-ui-padding-inline-default);
  --ds-component-message-font-weight-title: var(--ds-raw-typography-font-weight-semi-bold);
}

.comp-message.is-error {
  --ds-component-message-color-background: light-dark(var(--ds-raw-color-negative-200), var(--ds-raw-color-negative-800));
  --ds-component-message-color-content: light-dark(var(--ds-raw-color-negative-800), var(--ds-raw-color-negative-200));
}

.comp-message.is-success {
  --ds-component-message-color-background: light-dark(var(--ds-raw-color-positive-200), var(--ds-raw-color-positive-800));
  --ds-component-message-color-content: light-dark(var(--ds-raw-color-positive-800), var(--ds-raw-color-positive-200));
}

.comp-skiplink {
  --ds-component-skiplink-color-background: light-dark(var(--ds-raw-color-brand-primary-750), var(--ds-raw-color-brand-primary-200));
  --ds-component-skiplink-color-content: light-dark(var(--ds-raw-color-brand-primary-100), var(--ds-raw-color-brand-primary-800));
  --ds-component-skiplink-color-outline: var(--ds-semantic-colors-color-default-accent);
  --ds-component-skiplink-outline-width: var(--ds-semantic-ui-outline-width-bold);
  --ds-component-skiplink-radius: var(--ds-semantic-ui-radius-default);
  --ds-component-skiplink-padding-inline: var(--ds-semantic-ui-padding-inline-default);
  --ds-component-skiplink-padding-block: var(--ds-semantic-ui-padding-block-default);
}

.comp-footer {
  --ds-component-footer-gap-nav: var(--ds-raw-spacing-md);
  --ds-component-footer-font-size-nav: var(--ds-raw-typography-font-size-sm);
}

.comp-surface {
  --ds-component-surface-color-background: var(--ds-semantic-colors-background-page-surface);
  --ds-component-surface-color-content: var(--ds-semantic-colors-content-page-surface);
  --ds-component-surface-radius: var(--ds-semantic-ui-radius-default);
  --ds-component-surface-padding-block: var(--ds-semantic-ui-padding-block-lg);
  --ds-component-surface-padding-inline: var(--ds-semantic-ui-padding-inline-lg);
}

.comp-surface.is-slim {
  --ds-component-surface-padding-block: var(--ds-raw-spacing-xs);
  --ds-component-surface-padding-inline: var(--ds-raw-spacing-md);
}

.comp-pagination-seven {
  --ds-component-pagination-seven-gap: var(--ds-raw-spacing-xs);
  --ds-component-pagination-seven-margin-block-start: var(--ds-raw-spacing-lg);
  --ds-component-pagination-seven-margin-block-end: var(--ds-raw-spacing-lg);
  --ds-component-pagination-seven-padding: var(--ds-raw-spacing-2xs);
  --ds-component-pagination-seven-radius: var(--ds-raw-border-radius-sm);
  --ds-component-pagination-seven-color-background: light-dark(var(--ds-raw-color-neutral-0), var(--ds-raw-color-neutral-950));
  --ds-component-pagination-seven-color-border: light-dark(var(--ds-raw-color-neutral-200), var(--ds-raw-color-neutral-700));
  --ds-component-pagination-seven-color-content: light-dark(var(--ds-raw-color-neutral-700), var(--ds-raw-color-neutral-300));
  --ds-component-pagination-seven-color-background-hover: light-dark(var(--ds-raw-color-neutral-100), var(--ds-raw-color-neutral-800));
  --ds-component-pagination-seven-color-border-hover: light-dark(var(--ds-raw-color-neutral-400), var(--ds-raw-color-neutral-500));
  --ds-component-pagination-seven-color-content-hover: light-dark(var(--ds-raw-color-neutral-900), var(--ds-raw-color-neutral-100));
  --ds-component-pagination-seven-color-background-current: light-dark(var(--ds-raw-color-brand-primary-50), var(--ds-raw-color-brand-primary-900));
  --ds-component-pagination-seven-color-border-current: light-dark(var(--ds-raw-color-brand-primary-600), var(--ds-raw-color-brand-primary-400));
  --ds-component-pagination-seven-color-content-current: light-dark(var(--ds-raw-color-brand-primary-700), var(--ds-raw-color-brand-primary-200));
  --ds-component-pagination-seven-padding-block: var(--ds-raw-spacing-md);
}

.comp-pages-list {
  --ds-component-pages-list-margin-block: var(--ds-raw-spacing-lg);
  --ds-component-pages-list-item-gap: var(--ds-raw-spacing-xs);
}

.comp-resources-list {
  --ds-component-resources-list-item-block: var(--ds-raw-spacing-sm);
  --ds-component-resources-list-item-translate-inline: var(--ds-raw-spacing-xs);
}

.comp-links-list {
  --ds-component-links-list-item-block: var(--ds-raw-spacing-sm);
  --ds-component-links-list-item-translate-inline: 1rem;
}

.util-html {
  --ds-utility-html-block-break-xs: min(0.75vh, 0.25lh);
  --ds-utility-html-block-break-sm: min(1.5vh, 0.75lh);
  --ds-utility-html-block-break-md: min(3vh, 1lh);
  --ds-utility-html-block-break-lg: min(5.25vh, 1.75lh);
  --ds-utility-html-color-marker: light-dark(var(--ds-raw-color-brand-secondary-500), var(--ds-raw-color-brand-secondary-500));
}

.util-h1-ish, h1:not([class]) {
  --ds-utility-h1-ish-font-family: var(--ds-raw-typography-font-family-default);
  --ds-utility-h1-ish-font-weight: var(--ds-raw-typography-font-weight-semi-bold);
  --ds-utility-h1-ish-font-size-min: var(--ds-raw-typography-font-size-2xl);
  --ds-utility-h1-ish-font-size-max: var(--ds-raw-typography-font-size-4xl);
  --ds-utility-h1-ish-letter-spacing: var(--ds-raw-typography-letter-spacing-none);
  --ds-utility-h1-ish-line-height: var(--ds-raw-typography-leading-tight);
  --ds-utility-h1-ish-text-wrap: var(--ds-semantic-typography-heading-text-wrap-default);
  --ds-utility-h1-ish-hyphens: var(--ds-semantic-typography-hyphens-default);
}

.util-h2-ish, h2:not([class]) {
  --ds-utility-h2-ish-font-family: var(--ds-raw-typography-font-family-default);
  --ds-utility-h2-ish-font-weight: var(--ds-raw-typography-font-weight-semi-bold);
  --ds-utility-h2-ish-font-size-min: var(--ds-raw-typography-font-size-xl);
  --ds-utility-h2-ish-font-size-max: var(--ds-raw-typography-font-size-2xl);
  --ds-utility-h2-ish-letter-spacing: var(--ds-raw-typography-letter-spacing-none);
  --ds-utility-h2-ish-line-height: var(--ds-raw-typography-leading-tight);
  --ds-utility-h2-ish-text-wrap: var(--ds-semantic-typography-heading-text-wrap-default);
  --ds-utility-h2-ish-hyphens: var(--ds-semantic-typography-hyphens-default);
}

.util-h3-ish, h3:not([class]) {
  --ds-utility-h3-ish-font-family: var(--ds-raw-typography-font-family-default);
  --ds-utility-h3-ish-font-weight: var(--ds-raw-typography-font-weight-semi-bold);
  --ds-utility-h3-ish-font-size-min: var(--ds-raw-typography-font-size-lg);
  --ds-utility-h3-ish-font-size-max: var(--ds-raw-typography-font-size-xl);
  --ds-utility-h3-ish-letter-spacing: var(--ds-raw-typography-letter-spacing-none);
  --ds-utility-h3-ish-line-height: var(--ds-raw-typography-leading-tight);
  --ds-utility-h3-ish-text-wrap: var(--ds-semantic-typography-heading-text-wrap-default);
  --ds-utility-h3-ish-hyphens: var(--ds-semantic-typography-hyphens-default);
}

.util-h4-ish, h4:not([class]) {
  --ds-utility-h4-ish-font-family: var(--ds-raw-typography-font-family-default);
  --ds-utility-h4-ish-font-weight: var(--ds-raw-typography-font-weight-regular);
  --ds-utility-h4-ish-font-size-min: var(--ds-raw-typography-font-size-lg);
  --ds-utility-h4-ish-font-size-max: var(--ds-raw-typography-font-size-xl);
  --ds-utility-h4-ish-letter-spacing: var(--ds-raw-typography-letter-spacing-none);
  --ds-utility-h4-ish-line-height: var(--ds-raw-typography-leading-tight);
  --ds-utility-h4-ish-text-wrap: var(--ds-semantic-typography-heading-text-wrap-default);
  --ds-utility-h4-ish-hyphens: var(--ds-semantic-typography-hyphens-default);
}

.util-h5-ish, h5:not([class]) {
  --ds-utility-h5-ish-font-family: var(--ds-raw-typography-font-family-default);
  --ds-utility-h5-ish-font-weight: var(--ds-raw-typography-font-weight-regular);
  --ds-utility-h5-ish-font-size-min: var(--ds-raw-typography-font-size-md);
  --ds-utility-h5-ish-font-size-max: var(--ds-raw-typography-font-size-lg);
  --ds-utility-h5-ish-letter-spacing: var(--ds-raw-typography-letter-spacing-none);
  --ds-utility-h5-ish-line-height: var(--ds-raw-typography-leading-tight);
  --ds-utility-h5-ish-text-wrap: var(--ds-semantic-typography-heading-text-wrap-default);
  --ds-utility-h5-ish-hyphens: var(--ds-semantic-typography-hyphens-default);
}

.layout-holy-grail {
  --ds-layout-holy-grail-header-height-compact: 4rem;
  --ds-layout-holy-grail-header-height-relaxed: 6rem;
  --ds-layout-holy-grail-drawer-width-desktop: 20rem;
  --ds-layout-holy-grail-drawer-width-below-desktop: min(23rem, 100vw);;
  --ds-layout-holy-grail-gutter-auto: 3rem;
}

.layout-grid-teaserlist {
  --ds-layout-grid-teaserlist-gap-compact: var(--ds-raw-spacing-md);
  --ds-layout-grid-teaserlist-gap-relaxed: var(--ds-raw-spacing-md);
}