/* ========================================================= */
/* Foundations                                                */
/* ========================================================= */

:root {
  /* Colors */
  --color-darkblue: #4661A9;
  --color-midblue: #657FBA;
  --color-darkgreen: #4D646E;
  --color-darkbrown: #665F57;
  --color-light-grey: #E2E5E9;
  --color-medium-grey: #CDCFD4;
  --color-dark-grey: #7B879D;
  --color-black: #000000;
  --color-white: #FFFFFF;
  --color-process-inactive: #FFAE79;
  --color-signal-green: #009101;
  --color-signal-green-light: #65A665;
  --color-signal-yellow: #9C7A00;
  --color-signal-red: #9B3B2F;
  --color-font-dark: #414959;
  --color-font-light: #FFFFFF;
  --color-font-hyperlink: #FF6900;
  --color-background-purple: #373C4A;
  --color-background-purple-light: #656C7D;
  --color-transparent: transparent;

  /* Semantic component tokens: Cards */
  --surface-card: var(--color-light-grey);
  --surface-card-body: var(--color-light-grey);
  --surface-card-segment-neutral: var(--color-light-grey);
  --surface-card-group: var(--color-background-purple-light);
  --surface-card-transparent: var(--color-transparent);
  --surface-card-header-primary: var(--color-darkblue);
  --surface-card-header-alternative: var(--color-darkgreen);
  --surface-card-header-muted: var(--color-darkbrown);
  --divider-card-segment: var(--color-white);
  --text-card-header: var(--color-font-light);
  --text-card-body: var(--color-font-dark);
  --text-card-transparent: var(--color-font-light);
  --layout-card-body-content-justify: flex-start;
  --layout-card-segment-content-gap: var(--spacing-small);

  /* Semantic component tokens: Interactive elements */
  --surface-form-preview: var(--color-light-grey);
  --surface-control-default: var(--color-white);
  --surface-control-active: var(--color-white);
  --surface-control-inactive: var(--color-white);
  --surface-control-disabled: var(--color-white);
  --surface-button-active: var(--color-medium-grey);
  --surface-button-process: var(--color-font-hyperlink);
  --surface-button-process-inactive: var(--color-process-inactive);
  --surface-button-inactive: var(--color-light-grey);
  --surface-tab-selected: var(--color-dark-grey);
  --surface-tab-unselected: var(--color-white);
  --surface-tab-compact-background: var(--surface-form-preview);
  --surface-tab-compact-unselected: var(--color-medium-grey);
  --surface-input-clear: var(--color-medium-grey);
  --surface-toggle-track: var(--color-medium-grey);
  --surface-toggle-handle: var(--color-darkblue);
  --surface-menu-panel-portal: var(--color-light-grey);
  --surface-help-icon: var(--color-medium-grey);
  --surface-help-panel: var(--color-light-grey);
  --surface-pulldown-panel: var(--color-light-grey);
  --surface-activatable-remove: var(--surface-control-default);
  --surface-slider-track: var(--color-medium-grey);
  --surface-slider-progress: var(--color-dark-grey);
  --surface-slider-thumb: var(--color-dark-grey);
  --surface-checkbox-default: var(--color-white);
  --surface-checkbox-on-context: var(--color-white);
  --surface-radio-default: var(--color-white);
  --layout-pulldown-panel-padding-inline: var(--compact-interaction-padding-horizontal);
  --layout-pulldown-option-padding-inline: var(--compact-interaction-padding-horizontal);
  --layout-pulldown-padding-inline: var(--compact-interaction-padding-horizontal);
  --layout-pulldown-chevron-offset: var(--compact-interaction-padding-horizontal);
  --layout-tab-navigation-large-padding-inline: var(--interaction-padding-horizontal);
  --layout-pulldown-chevron-reserved-space: var(--spacing-large);
  --layout-pulldown-panel-form-mobile-width: 90%;
  --layer-pulldown-panel: var(--dimension-layer-pulldown-panel);
  --layout-multiselect-pulldown-panel-desktop-width: var(--dimension-multiselect-pulldown-panel-desktop-width);
  --layout-multiselect-pulldown-label-column-width-fallback: max-content;
  --layout-input-label-width: var(--dimension-input-label-width);
  --layout-input-field-desktop-width: var(--dimension-input-field-desktop-width);
  --layout-input-field-max-width: var(--dimension-input-field-max-width);
  --layout-form-input-field-max-width: calc(var(--layout-input-field-max-width) + 100px);
  --layout-search-field-width: var(--dimension-search-field-width);
  --layout-mode-toggle-local-height: var(--compact-interaction-height);
  --layout-mode-toggle-local-width-factor: 3;
  --layout-mode-toggle-width: calc(var(--interaction-height) * 3.5);
  --layout-help-panel-width: calc(var(--interaction-height) * 8);
  --text-control-default: var(--color-font-dark);
  --text-control-disabled: var(--color-dark-grey);
  --text-button-process: var(--color-font-light);
  --text-tab-selected: var(--color-font-light);
  --text-tab-unselected: var(--color-dark-grey);
  --text-toggle-label-active: var(--color-font-light);
  --text-menu-link-portal: var(--color-font-dark);
  --text-help-icon: var(--color-font-dark);
  --text-help-panel: var(--color-font-dark);
  --text-activatable-remove: var(--text-control-default);
  --text-hyperlink: var(--color-font-hyperlink);
  --icon-pulldown-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M2 2l4 4 4-4' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='square' stroke-linejoin='miter'/%3E%3C/svg%3E");
  --icon-sandwich-line-portal: var(--color-font-dark);
  --icon-radio-mark: var(--color-font-dark);

  /* Semantic component tokens: Charts */
  --surface-score-bar-track: var(--color-medium-grey);
  --surface-chart-area: var(--color-light-grey);
  --chart-value-positive: var(--color-signal-green);
  --chart-value-neutral: var(--color-signal-yellow);
  --chart-value-negative: var(--color-signal-red);
  --chart-value-primary: var(--color-darkblue);
  --chart-value-reference: var(--color-medium-grey);
  --chart-grid-line: var(--color-medium-grey);
  --chart-axis-line: var(--color-font-dark);
  --chart-marker-line: var(--color-font-dark);
  --chart-median-line: var(--color-font-dark);
  --text-chart-default: var(--color-font-dark);
  --text-score-state-positive: var(--chart-value-positive);
  --text-score-state-warning: var(--chart-value-neutral);
  --text-score-state-neutral: var(--text-score-state-warning);
  --text-score-state-negative: var(--chart-value-negative);
  --layout-score-bar-item-columns: max-content 1fr;
  --layout-score-bar-item-gap: var(--spacing-large);
  --layout-score-bar-item-single-score-columns: max-content 1fr max-content;

  /* Semantic component tokens: Data display */
  --surface-data-table: var(--color-light-grey);
  --surface-data-table-header: var(--color-light-grey);
  --surface-data-table-cell: var(--color-light-grey);
  --surface-data-table-help-icon: var(--color-medium-grey);

  --text-data-table-default: var(--color-font-dark);
  --text-data-table-warning: var(--color-signal-yellow);
  --text-data-table-help-icon: var(--color-font-dark);

  /* Semantic component tokens: Typography */
  --text-typography-preview: var(--color-font-light);
  --layout-preview-align-items: flex-start;

  /* Semantic pattern tokens: Portal header */
  --surface-portal-header: var(--color-darkblue);
  --surface-portal-header-tab: var(--color-midblue);
  --surface-portal-header-tab-active: var(--color-light-grey);
  --text-portal-header-brand: var(--color-font-light);
  --font-size-portal-header-brand: calc(var(--font-size-brand) * 1.1);
  --text-portal-header-tab: var(--color-font-light);
  --text-portal-header-tab-active: var(--color-font-dark);
  --layout-page-content-inset-inline: var(--card-segment-padding-horizontal);
  --surface-options-row: var(--color-light-grey);
  --surface-options-row-control: var(--surface-control-default);
  --surface-options-row-control-selected: var(--surface-control-active);
  --surface-options-row-input-clear: var(--surface-input-clear);
  --surface-options-row-toggle-track: var(--surface-toggle-track);
  --surface-options-row-toggle-handle: var(--surface-toggle-handle);
  --surface-options-row-help-icon: var(--surface-help-icon);
  --surface-options-row-help-panel: var(--surface-help-panel);
  --divider-options-row-mobile: var(--color-white);
  --text-options-row-default: var(--text-control-default);
  --text-options-row-placeholder: var(--text-control-disabled);
  --text-options-row-help-icon: var(--color-font-light);
  --text-options-row-help-panel: var(--text-help-panel);
  --text-options-row-description: var(--color-font-light);
  --layout-options-row-margin-top: var(--spacing-small);
  --layout-options-row-main-gap: var(--spacing-large);
  --layout-options-row-group-gap: var(--spacing-small);
  --layout-options-row-mode-toggle-width: var(--dimension-options-row-mode-toggle-width);
  --layout-options-row-help-panel-width: var(--dimension-options-row-help-panel-width);
  --layout-object-card-min-width: var(--dimension-object-card-min-width);
  --layout-object-card-max-width: var(--dimension-object-card-max-width);
  --layout-object-card-height: var(--dimension-object-card-height);
  --layout-object-card-content-grow: var(--dimension-object-card-content-grow);
  --layout-object-card-mobile-width: var(--dimension-object-card-mobile-width);
  --layout-object-card-mobile-height: var(--dimension-object-card-mobile-height);
  --layout-object-card-desktop-breakpoint: var(--dimension-object-card-desktop-breakpoint);
  --layout-content-card-margin-top-desktop: var(--dimension-content-card-margin-top-desktop);
  --layout-content-card-margin-top-mobile: var(--dimension-content-card-margin-top-mobile);
  --dimension-notifications-card-min-width: 445px;
  --layout-notifications-card-flex-basis: var(--dimension-notifications-card-min-width);
  --layout-notifications-card-min-width: var(--dimension-notifications-card-min-width);
  --layout-notifications-card-max-width: var(--layout-object-card-max-width);
  --dimension-notifications-text-segment-fixed-height: 150px;
  --dimension-notifications-text-segment-fixed-height-small: 60px;
  --layout-notifications-text-segment-fixed-height: var(--dimension-notifications-text-segment-fixed-height);
  --layout-notifications-text-segment-fixed-height-small: var(--dimension-notifications-text-segment-fixed-height-small);
  --layout-object-group-card-min-width: var(--dimension-object-group-card-min-width);
  --layout-object-group-card-max-width: var(--dimension-object-group-card-max-width);
  --layout-object-group-card-height: var(--dimension-object-group-card-height);
  --surface-object-card-lower-segment: var(--color-white);
  --text-company-card-data-negative: var(--chart-value-negative);
  --text-company-card-moat-neutral: var(--chart-value-neutral);
  --layout-company-card-analysis-gap-after-moat: var(--spacing-large);
  --surface-navigation-card: var(--color-white);
  --surface-navigation-card-body: var(--color-white);
  --surface-content-block-card-title: var(--color-light-grey);
  --surface-content-block-card-content: var(--color-white);
  --surface-public-page-pattern-call-to-action-box-light: var(--color-light-grey);
  --radius-picture-full-width: var(--radius-card);
  --layout-content-cards-group-gap: var(--spacing-small);
  --layout-public-page-pattern-call-to-action-box-width: calc(var(--dimension-public-content-width) * 0.5);
  --layout-page-layout-public-2-column-columns: repeat(2, minmax(0, 1fr));
  --layout-page-layout-public-2-column-gap: var(--spacing-large);
  --surface-card-list-drawer: var(--color-background-purple);
  --text-content-block-card-title: var(--color-font-dark);
  --text-content-block-card-content: var(--color-font-dark);
  --text-card-list-drawer: var(--color-font-dark);
  --layout-card-list-drawer-width: var(--dimension-card-list-drawer-width);
  --surface-vsf-drawer-object-card-header: var(--color-darkblue);
  --surface-vsf-drawer-object-card-body: var(--color-darkblue);
  --text-vsf-drawer-object-card-heading: var(--color-font-light);
  --text-vsf-drawer-object-card-body: var(--color-font-light);
  --layout-vsf-drawer-object-card-column-gap: var(--spacing-large);
  --text-vsf-list-card-limit-note: var(--color-signal-red);
  --layout-vsf-list-card-summary-offset-block-start: var(--layout-company-card-analysis-gap-after-moat);
  --layout-vsf-list-card-delete-confirmation-target-max-width: var(--layout-object-group-card-max-width);
  --surface-text-layout-preview: var(--color-light-grey);
  --layout-text-layout-column-gap: var(--spacing-large);
  --layout-text-layout-two-column-columns: repeat(2, minmax(0, 1fr));
  --layout-text-layout-three-column-columns: repeat(3, minmax(0, 1fr));
  --text-align-text-layout-column-left: left;
  --text-align-text-layout-column-center: center;
  --text-align-text-layout-column-right: right;
  --surface-delete-confirmation-overlay: var(--color-light-grey);
  --surface-delete-confirmation-target-dim-overlay: var(--color-black);
  --text-delete-confirmation-overlay: var(--color-font-dark);
  --layout-delete-confirmation-target-max-width: 35rem;
  --layout-delete-confirmation-overlay-width-factor: 0.8;
  --layout-delete-confirmation-overlay-offset-block-start: 10%;
  --layout-delete-confirmation-overlay-max-height: calc(100vh - 10vh);
  --layout-delete-confirmation-content-gap: var(--spacing-small);
  --layout-delete-confirmation-actions-gap: var(--spacing-small);
  --layout-delete-confirmation-actions-offset-block-start: var(--spacing-large);
  --layout-delete-confirmation-label-width: var(--dimension-input-label-width);
  --layout-delete-confirmation-target-dim-opacity: 0.5;
  --layer-delete-confirmation-overlay: 50;

  /* Typography */
  --font-family-base: "Open Sans", sans-serif;
  --font-size-base: 1rem;
  --font-size-small: 0.8rem;
  --font-size-brand: 1.6rem;
  --font-size-h1: 1.8rem;
  --font-size-h2: 1.5rem;
  --font-weight-regular: 400;
  --font-weight-semibold: 600;
  --line-height-base: 1.5;

  /* Spacing */
  --spacing-small: 0.3rem;
  --spacing-large: 1rem;
  --card-segment-padding-vertical: 0.75rem;
  --card-segment-padding-horizontal: 1rem;
  --card-segment-padding-horizontal-mobile: 0.5rem;
  --interaction-padding-vertical: 0.25rem;
  --interaction-padding-horizontal: 1rem;

  /* Dimensions */
  --interaction-height: 2rem;
  --compact-interaction-height: 1.5rem;
  --compact-interaction-padding-vertical: 0.15rem;
  --compact-interaction-padding-horizontal: 0.75rem;
  --small-interaction-element-size: 1.25rem;
  --disabled-opacity: 0.7;
  --sandwich-line-width: 1.25rem;
  --sandwich-line-height: 4px;
  --sandwich-line-gap: 3px;
  --score-bar-height: 1rem;
  --score-marker-width: 6px;
  --score-marker-height: calc(var(--score-bar-height) + 2px);
  --chart-height-bar: 24rem;
  --chart-height-line: 18rem;
  --chart-axis-label-column-width: 4rem;
  --chart-axis-label-gap: 5px;
  --chart-grid-line-width: 1px;
  --chart-line-width: 2px;
  --chart-label-position-default: 50%;
  --dimension-object-card-min-width: 395px;
  --dimension-object-card-max-width: 600px;
  --dimension-object-card-height: 600px;
  --dimension-object-card-content-grow: 1;
  --dimension-object-card-mobile-width: 100%;
  --dimension-object-card-mobile-height: auto;
  --dimension-object-card-desktop-breakpoint: 768px;
  --dimension-content-card-margin-top-desktop: 100px;
  --dimension-content-card-margin-top-mobile: 1rem;
  --dimension-object-group-card-min-width: 450px;
  --dimension-object-group-card-max-width: 650px;
  --dimension-object-group-card-height: 700px;
  --dimension-input-label-width: 9rem;
  --dimension-input-field-desktop-width: 400px;
  --dimension-input-field-max-width: 600px;
  --dimension-search-field-width: 15.3rem;
  --dimension-public-content-width: 100%;
  --dimension-layer-pulldown-panel: 40;
  --dimension-multiselect-pulldown-panel-desktop-width: 500px;
  --dimension-options-row-mode-toggle-width: 7rem;
  --dimension-options-row-help-panel-width: 16rem;
  --dimension-card-list-drawer-width: 40%;
  --dimension-slider-track-height: 6px;
  --dimension-slider-thumb-size: 22px;
  --dimension-slider-thumb-offset-top: -8px;
  --radius-slider-track: 999px;

  /* Radius */
  --radius-card: 8px;
  --radius-graph-bar: 2px;
  --radius-interaction: 4px;

  /* Shadows */
  --shadow-none: none;
  --shadow-overlay: 0 10px 24px rgba(0, 0, 0, 0.22);
  --shadow-interaction-inset: none;

  /* Borders */
  --border-none: none;
  --border-control: none;

  /* Runtime defaults */
  --layout-object-card-shared-width: auto;
  --sg-slider-progress: 0%;
  --chart-label-position: var(--chart-label-position-default);
}


/* ========================================================= */
/* Base                                                       */
/* ========================================================= */

body {
  font-family: var(--font-family-base);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-base);
  color: var(--color-font-dark);
  background: var(--color-background-purple);
  margin: 0;
  padding: var(--spacing-small);
}

@media (max-width: 48rem) {
  :root {
    --layout-tab-navigation-large-padding-inline: 0.7rem;
  }

  body {
    padding: var(--spacing-small);
  }
}

section {
  margin-bottom: var(--spacing-large);
}

section + section {
  margin-top: var(--spacing-large);
}

.sg-main-heading {
  margin: 0 0 var(--spacing-large) 0;
  font-family: var(--font-family-base);
  font-size: var(--font-size-brand);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-base);
  color: var(--color-font-light);
}

.sg-sub-heading {
  margin: 0 0 var(--spacing-large) 0;
  font-family: var(--font-family-base);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-base);
}

.sg-text-on-dark {
  color: var(--color-font-light);
}

.sg-brand-title {
  margin: 0 0 var(--spacing-large) 0;
  font-family: var(--font-family-base);
  font-size: var(--font-size-brand);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-base);
}

.sg-heading-h1 {
  margin: 0 0 calc(var(--spacing-large) - 0.5rem) 0;
  font-family: var(--font-family-base);
  font-size: var(--font-size-h1);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-base);
}

.sg-heading-h2 {
  margin: 0 0 var(--spacing-large) 0;
  font-family: var(--font-family-base);
  font-size: var(--font-size-h2);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-base);
}

@media (max-width: 48rem) {
  .sg-heading-h2 {
    font-size: calc(var(--font-size-h2) * 0.9);
  }
}

.sg-preview-label {
  margin: 0 0 var(--spacing-small) 0;
  font-family: var(--font-family-base);
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-base);
  color: var(--color-font-light);
}

.sg-preview-area {
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--spacing-small);
  align-items: var(--layout-preview-align-items);
  padding: 0;
  border-radius: 0;
  background: transparent;
}

/* ========================================================= */
/* Typography helpers                                         */
/* ========================================================= */

.sg-body,
.sg-strong,
.sg-section-title,
.sg-bar-label,
.sg-table-label,
.sg-table-value {
  font-family: var(--font-family-base);
  line-height: var(--line-height-base);
}

.sg-body,
.sg-section-title {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-regular);
}

.sg-body {
  margin: 0;
}

.sg-body:not(:last-child) {
  margin: 0 0 var(--spacing-large) 0;
}

.sg-strong,
.sg-bar-label {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
}

.sg-table-label {
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-regular);
}

.sg-table-value {
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-semibold);
}

.sg-index a {
  color: var(--color-font-hyperlink);
}

.sg-index .sg-sub-heading {
  color: var(--color-font-light);
}

.sg-foundation-table {
  width: 100%;
  margin-bottom: var(--spacing-large);
  color: var(--color-font-light);
  border: 1px solid var(--color-white);
}

.sg-foundation-table th,
.sg-foundation-table td {
  color: var(--color-font-light);
  border: 1px solid var(--color-white);
  vertical-align: top;
}

.sg-section-h2,
.sg-section-h3 {
  margin: 0 0 var(--spacing-small) 0;
  color: var(--color-font-light);
}

/* ========================================================= */
/* Components: Interactive Elements                          */
/* ========================================================= */



    .sg-component-row {
      display: flex;
      flex-wrap: wrap;
      gap: var(--spacing-small);
      align-items: center;
    }

    .sg-component-column {
      display: flex;
      flex-direction: column;
      gap: var(--spacing-small);
      width: fit-content;
    }

    /*
      Form preview surface only:
      All form elements in this component are intentionally shown on the form-area background.
      This wrapper provides only that evaluation background and must not be implemented as part of the form control itself.
      The current preview background uses light-grey according to the style foundations.
    */
    .sg-form-preview-area {
      display: inline-flex;
      flex-direction: column;
      gap: var(--spacing-small);
      width: fit-content;
      padding: var(--spacing-large);
      border-radius: var(--radius-card);
      background: var(--surface-form-preview);
    }

    .sg-pulldown-demo {
      position: relative;
      display: inline-flex;
      flex-direction: column;
      gap: var(--spacing-small);
      width: fit-content;
    }


    .sg-state-example {
      display: grid;
      grid-template-columns: calc(var(--interaction-height) * 6) auto;
      gap: var(--spacing-small);
      align-items: center;
    }

    .sg-state-example__label {
      margin: 0;
      color: var(--text-control-default);
    }

    .sg-activatable-control {
      display: inline-flex;
      align-items: center;
      gap: var(--spacing-small);
    }

    .sg-activatable-row {
      display: inline-flex;
      align-items: center;
      gap: var(--spacing-small);
    }

    .sg-interaction-element {
      box-sizing: border-box;
      height: var(--interaction-height);
      padding:
        var(--interaction-padding-vertical)
        var(--interaction-padding-horizontal);
      border: var(--border-none);
      border-radius: var(--radius-interaction);
      box-shadow: var(--shadow-none);
      font-family: var(--font-family-base);
      font-size: var(--font-size-base);
      line-height: var(--line-height-base);
      color: var(--text-control-default);
      background: var(--surface-control-default);
    }

    .sg-form-active {
      background: var(--surface-control-active);
      color: var(--text-control-default);
    }

    .sg-form-inactive-selectable {
      background: var(--surface-control-inactive);
      color: var(--text-control-default);
    }

    .sg-form-disabled {
      background: var(--surface-control-disabled);
      color: var(--text-control-disabled);
      opacity: var(--disabled-opacity);
      cursor: not-allowed;
    }

    .sg-interaction-element:focus,
    .sg-interaction-element:focus-visible,
    .sg-mode-toggle:focus,
    .sg-mode-toggle:focus-visible,
    .sg-sandwich-button:focus,
    .sg-sandwich-button:focus-visible,
    .sg-input-clear-button:focus,
    .sg-input-clear-button:focus-visible,
    .sg-help-icon:focus,
    .sg-help-icon:focus-visible,
    .sg-sandwich-menu-link:focus,
    .sg-sandwich-menu-link:focus-visible,
    .sg-checkbox-field:focus,
    .sg-checkbox-field:focus-visible,
    .sg-radio-field:focus,
    .sg-radio-field:focus-visible,
    .sg-pulldown-option:focus,
    .sg-pulldown-option:focus-visible,
    .sg-hyperlink:focus,
    .sg-hyperlink:focus-visible {
      outline: none;
    }

    .sg-button {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-weight: var(--font-weight-semibold);
      cursor: pointer;
      text-decoration: none;
    }

    .sg-button--active {
      background: var(--surface-button-active);
      color: var(--text-control-default);
    }

    .sg-button--process {
      background: var(--surface-button-process);
      color: var(--text-button-process);
    }

    .sg-button--cta {
      --surface-button-cta: var(--color-darkblue);
      --text-button-cta: var(--color-font-light);
      height: auto;
      min-height: var(--interaction-height);
      text-align: center;
      background: var(--surface-button-cta);
      color: var(--text-button-cta);
      padding: var(--spacing-large);
    }

    .sg-button--process-inactive {
      background: var(--surface-button-process-inactive);
      color: var(--text-button-process);
    }

    .sg-button--inactive {
      background: var(--surface-button-active);
      color: var(--text-control-disabled);
    }

    .sg-button:disabled,
    .sg-button--disabled {
      cursor: not-allowed;
      color: var(--text-control-disabled);
    }

    .sg-button--process-inactive:disabled {
      color: var(--text-button-process);
    }

    .sg-tab-button-group {
      display: flex;
      flex-wrap: wrap;
      gap: var(--spacing-small);
      align-items: center;
    }

    .sg-tab-button-group[data-component-size="compact"] {
      background: var(--surface-tab-compact-background);
    }

    .sg-tab-button-group[data-component-variant="linksmenu-items"] {
      flex-direction: column;
      align-items: stretch;
      width: 100%;
    }

    .sg-tab-button-group[data-component-variant="linksmenu-items"] .sg-tab-button {
      width: 100%;
      justify-content: flex-start;
      text-align: left;
    }

    .sg-tab-button-group[data-component-context="content"] {
      background: var(--surface-tab-compact-background);
    }

    .sg-tab-button-group[data-component="tab-navigation"][data-component-size="large"] .sg-tab-button {
      padding-inline: var(--layout-tab-navigation-large-padding-inline);
    }

    .sg-tab-button-group[data-component="tab-navigation"][data-component-size="large"] .sg-tab-button[aria-selected="true"] {
      background: var(--surface-tab-unselected);
      color: var(--text-tab-unselected);
    }

    .sg-tab-button-group[data-component="tab-navigation"][data-component-size="large"] .sg-tab-button[aria-selected="false"] {
      background: var(--surface-tab-selected);
      color: var(--text-tab-selected);
    }

    .sg-tab-button-group[data-component="tab-navigation"][data-component-size="large"][data-component-context="content"] .sg-tab-button[aria-selected="true"] {
      background: var(--surface-control-default);
      color: var(--text-control-default);
    }

    .sg-tab-button-group[data-component="tab-navigation"][data-component-size="large"][data-component-context="content"] .sg-tab-button[aria-selected="false"] {
      background: var(--surface-tab-compact-unselected);
      color: var(--text-control-default);
    }

    .sg-tab-button-group[data-component-size="compact"] .sg-tab-button[aria-selected="false"] {
      background: var(--surface-tab-compact-unselected);
      color: var(--text-control-default);
    }

    .sg-tab-button--compact {
      height: var(--compact-interaction-height);
      padding:
        var(--compact-interaction-padding-vertical)
        var(--compact-interaction-padding-horizontal);
      font-size: var(--font-size-small);
    }

    .sg-pulldown {
      font-weight: var(--font-weight-regular);
      appearance: none;
      padding-left: var(--layout-pulldown-padding-inline);
      padding-right: calc(
        var(--layout-pulldown-chevron-offset)
        + var(--layout-pulldown-chevron-reserved-space)
      );
      background-image: var(--icon-pulldown-chevron);
      background-position: right var(--layout-pulldown-chevron-offset) center;
      background-size: calc(var(--interaction-height) * 0.375) calc(var(--interaction-height) * 0.25);
      background-repeat: no-repeat;
    }

    .sg-pulldown-demo__trigger {
      display: block;
      width: 100%;
      min-width: 0;
      text-align: left;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .sg-pulldown-demo[data-component-context="form"],
    .sg-pulldown-demo[data-component-context="overlay"] {
      width: 100%;
      min-width: 0;
      max-width: var(--layout-input-field-max-width);
    }

    .sg-pulldown-demo[data-component-context="form"] .sg-pulldown-demo__trigger,
    .sg-pulldown-demo[data-component-context="overlay"] .sg-pulldown-demo__trigger {
      width: 100%;
      min-width: 0;
      max-width: var(--layout-input-field-max-width);
    }

    .sg-pulldown--selected {
      background-color: var(--surface-control-active);
      color: var(--text-control-default);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .sg-pulldown--inactive-selectable {
      background-color: var(--surface-control-inactive);
      color: var(--text-control-default);
    }

    .sg-pulldown-demo[data-activatable="true"] .sg-pulldown-demo__trigger.sg-pulldown--inactive-selectable {
      opacity: var(--disabled-opacity);
    }

    .sg-labeled-input-row .sg-pulldown-demo,
    .sg-labeled-input-row .sg-pulldown-demo .sg-pulldown {
      width: 100%;
      min-width: 0;
      max-width: var(--layout-input-field-max-width);
    }

    .sg-pulldown--disabled {
      background-color: var(--surface-control-disabled);
      color: var(--text-control-disabled);
      opacity: var(--disabled-opacity);
      cursor: not-allowed;
    }

    .sg-input-single-line {
      font-weight: var(--font-weight-regular);
      color: var(--text-control-default);
      -webkit-appearance: none;
      appearance: none;
    }

    .sg-input-single-line::placeholder {
      color: var(--text-control-disabled);
      opacity: 1;
    }

    .sg-input-single-line--inactive-selectable {
      color: var(--text-control-default);
    }

    .sg-input-single-line--disabled {
      color: var(--text-control-disabled);
      opacity: var(--disabled-opacity);
      cursor: not-allowed;
    }

    .sg-input-single-line-wrap {
      position: relative;
      display: inline-flex;
      align-items: center;
    }

    .sg-input-single-line-wrap .sg-input-single-line {
      padding-right: calc(var(--interaction-padding-horizontal) + var(--interaction-height));
    }

    .sg-input-clear-button {
      position: absolute;
      top: 0;
      right: 0;
      display: none;
      align-items: center;
      justify-content: center;
      width: var(--interaction-height);
      height: var(--interaction-height);
      padding: 0;
      margin: 0;
      border: var(--border-none);
      border-radius: 0 var(--radius-interaction) var(--radius-interaction) 0;
      box-shadow: var(--shadow-none);
      -webkit-appearance: none;
      appearance: none;
      font-family: var(--font-family-base);
      font-size: var(--font-size-base);
      line-height: 1;
      color: var(--text-control-default);
      background: var(--surface-input-clear);
      cursor: pointer;
    }

    .sg-input-single-line-wrap[data-has-value="true"] .sg-input-clear-button {
      display: inline-flex;
    }

    .sg-search-field-row {
      display: inline-flex;
      align-items: center;
      gap: var(--spacing-small);
      white-space: nowrap;
      flex-wrap: nowrap;
    }

    .sg-search-field-input {
      width: var(--layout-search-field-width);
    }

    .sg-search-result-count {
      color: var(--color-dark-grey);
      font-family: var(--font-family-base);
      font-size: var(--font-size-base);
      line-height: var(--line-height-base);
    }

    .sg-labeled-input-row {
      display: flex;
      align-items: center;
      gap: 0;
      width: auto;
      max-width: none;
    }

    .sg-labeled-input-row .sg-label {
      min-width: 0;
      flex: 0 0 auto;
      margin-right: var(--spacing-large);
    }

    .sg-labeled-input-row .sg-input-single-line,
    .sg-labeled-input-row .sg-input-multi-line {
      width: 100%;
      min-width: 0;
      max-width: var(--layout-form-input-field-max-width);
    }

    .sg-input-validation-stack {
      display: flex;
      flex: 1 1 auto;
      flex-direction: column;
      gap: var(--spacing-small);
      min-width: 0;
      width: 100%;
      max-width: var(--layout-form-input-field-max-width);
    }

    .sg-input-validation-stack .sg-input-single-line,
    .sg-input-validation-stack .sg-input-multi-line {
      width: 100%;
      min-width: 0;
      max-width: 100%;
    }

    .sg-form-validation-text {
      margin: 0;
      color: var(--text-vsf-list-card-limit-note);
      font-family: var(--font-family-base);
      font-size: var(--font-size-small);
      line-height: var(--line-height-base);
    }

    .sg-input-single-line[aria-invalid="true"],
    .sg-input-multi-line[aria-invalid="true"] {
      box-shadow: 0 0 0 1px var(--color-signal-red) inset;
    }

    .sg-pulldown[aria-invalid="true"],
    .sg-checkbox-field[aria-invalid="true"],
    .sg-radio-field[aria-invalid="true"] {
      box-shadow: 0 0 0 1px var(--color-signal-red) inset;
    }

    .sg-labeled-input-row:has(.sg-input-multi-line) {
      align-items: flex-start;
    }

    #component-radio-field .sg-labeled-input-row--radio-invalid {
      display: grid;
      grid-template-columns: auto minmax(0, 1fr);
      column-gap: var(--spacing-large);
      row-gap: var(--spacing-small);
      align-items: start;
    }

    #component-radio-field .sg-labeled-input-row--radio-invalid .sg-label {
      grid-column: 1;
      grid-row: 1;
      margin-right: 0;
    }

    #component-radio-field .sg-labeled-input-row--radio-invalid .sg-radio-field-row {
      grid-column: 2;
      grid-row: 1;
    }

    #component-radio-field .sg-labeled-input-row--radio-invalid .sg-form-validation-text {
      grid-column: 1 / -1;
      grid-row: 2;
    }

    #component-checkbox-field .sg-input-validation-stack--checkbox-invalid {
      gap: 0;
    }

    .sg-input-multi-line {
      box-sizing: border-box;
      min-height: calc(var(--interaction-height) * 2.75);
      padding: var(--interaction-padding-vertical) var(--interaction-padding-horizontal);
      border: var(--border-control);
      border-radius: var(--radius-interaction);
      box-shadow: var(--shadow-interaction-inset);
      font-family: var(--font-family-base);
      font-size: var(--font-size-base);
      line-height: var(--line-height-base);
      color: var(--text-control-default);
      background: var(--surface-control-inactive);
      resize: vertical;
    }

    .sg-input-component .sg-form-preview-area {
      width: 100%;
      box-sizing: border-box;
    }

    #component-pulldown .sg-form-preview-area {
      width: 100%;
      box-sizing: border-box;
    }

    #component-pulldown .sg-state-example {
      grid-template-columns: calc(var(--interaction-height) * 6) minmax(0, 1fr);
      width: 100%;
    }

    #component-pulldown .sg-state-example > :last-child {
      width: 100%;
      min-width: 0;
    }

    #component-pulldown .sg-pulldown-demo {
      width: 100%;
      min-width: 0;
      max-width: var(--layout-input-field-max-width);
    }

    #component-pulldown .sg-labeled-input-row {
      width: 100%;
      max-width: none;
    }

    #component-pulldown .sg-labeled-input-row .sg-pulldown,
    #component-pulldown .sg-labeled-input-row .sg-pulldown-demo {
      width: 100%;
      min-width: 0;
      max-width: var(--layout-input-field-max-width);
    }

    #component-pulldown .sg-pulldown-demo__trigger,
    #component-pulldown .sg-state-example > .sg-pulldown {
      width: 100%;
      min-width: 0;
      max-width: var(--layout-input-field-max-width);
    }

    #component-pulldown .sg-activatable-row {
      display: grid;
      grid-template-columns: max-content minmax(0, 1fr);
      align-items: center;
      column-gap: var(--spacing-large);
      width: 100%;
    }

    #component-pulldown .sg-pulldown-activatable-header {
      display: grid;
      grid-template-columns: max-content max-content;
      align-items: center;
      column-gap: var(--spacing-small);
      width: 100%;
      justify-content: start;
    }

    #component-pulldown .sg-pulldown-activatable-header .sg-mode-toggle {
      grid-column: 1;
    }

    #component-pulldown .sg-pulldown-activatable-header .sg-label {
      grid-column: 2;
      min-width: 0;
    }

    #component-pulldown .sg-activatable-row .sg-pulldown-demo {
      width: 100%;
      max-width: var(--layout-input-field-max-width);
      min-width: 0;
    }

    .sg-input-component .sg-state-example {
      grid-template-columns: calc(var(--interaction-height) * 6) minmax(0, 1fr);
    }

    @media (max-width: 48rem) {
      .sg-input-component .sg-form-preview-area {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
      }

      #component-pulldown .sg-form-preview-area {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
      }

      .sg-input-component .sg-state-example {
        grid-template-columns: 1fr;
        align-items: start;
        width: 100%;
      }

      #component-pulldown .sg-state-example {
        grid-template-columns: 1fr;
        align-items: start;
        width: 100%;
      }

      .sg-input-component .sg-state-example > :last-child {
        width: 100%;
        min-width: 0;
      }

      #component-pulldown .sg-state-example > :last-child {
        width: 100%;
        min-width: 0;
      }

      #component-pulldown .sg-labeled-input-row .sg-pulldown,
      #component-pulldown .sg-labeled-input-row .sg-pulldown-demo {
        width: 100%;
        min-width: 0;
        max-width: 100%;
      }

      #component-pulldown .sg-labeled-input-row {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-small);
        width: 100%;
        max-width: 100%;
      }

      #component-pulldown .sg-labeled-input-row .sg-label {
        min-width: 0;
        flex: 0 0 auto;
        margin-right: 0;
        margin-bottom: 0;
        line-height: 1;
      }

      #component-pulldown .sg-labeled-input-row .sg-pulldown-demo,
      #component-pulldown .sg-labeled-input-row .sg-pulldown {
        width: 100%;
        min-width: 0;
        max-width: 100%;
      }

      #component-pulldown .sg-activatable-row {
        grid-template-columns: 1fr;
        align-items: start;
        row-gap: var(--spacing-small);
        width: 100%;
        max-width: 100%;
      }

      .sg-labeled-input-row {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-small);
        width: 100%;
        max-width: 100%;
      }

      .sg-labeled-input-row .sg-label {
        min-width: 0;
        flex: 0 0 auto;
        margin-right: 0;
        margin-bottom: 0;
        line-height: 1;
      }

      .sg-labeled-input-row .sg-input-single-line,
      .sg-labeled-input-row .sg-input-multi-line {
        min-width: 0;
        max-width: 100%;
        width: 100%;
      }
    }

    .sg-mode-toggle {
      display: inline-flex;
      align-items: center;
      gap: var(--spacing-small);
      height: auto;
      padding: 0;
      border: var(--border-none);
      border-radius: 0;
      box-shadow: var(--shadow-none);
      appearance: none;
      -webkit-tap-highlight-color: transparent;
      background: transparent;
      cursor: pointer;
    }

    .sg-mode-toggle__label {
      font-family: var(--font-family-base);
      font-size: var(--font-size-base);
      font-weight: var(--font-weight-semibold);
      line-height: var(--line-height-base);
      color: var(--text-control-default);
    }

    .sg-mode-toggle__switch {
      position: relative;
      width: var(--layout-mode-toggle-width);
      height: var(--interaction-height);
      border-radius: var(--radius-interaction);
      background: var(--surface-toggle-track);
    }

    .sg-mode-toggle__handle {
      position: absolute;
      top: 0;
      right: 0;
      width: calc(100% / 2);
      height: 100%;
      border-radius: var(--radius-interaction);
      background: var(--surface-toggle-handle);
    }

    .sg-mode-toggle[data-active="absolute"] .sg-mode-toggle__handle {
      left: 0;
      right: auto;
    }

    .sg-mode-toggle[data-active="relative"] .sg-mode-toggle__handle {
      left: auto;
      right: 0;
    }

    .sg-mode-toggle--local .sg-mode-toggle__label {
      font-size: var(--font-size-small);
      font-weight: var(--font-weight-regular);
    }

    .sg-mode-toggle--local .sg-mode-toggle__switch {
      width: calc(var(--layout-mode-toggle-local-height) * var(--layout-mode-toggle-local-width-factor));
      height: var(--layout-mode-toggle-local-height);
    }

    .sg-activation-toggle-pattern {
      display: flex;
      align-items: center;
      gap: var(--spacing-small);
    }

    .sg-activation-mode-toggle {
      gap: 0;
    }

    .sg-activation-mode-toggle .sg-mode-toggle__switch {
      display: grid;
      grid-template-columns: 1fr 1fr;
      align-items: center;
      overflow: hidden;
    }

    .sg-activation-mode-toggle .sg-mode-toggle__handle {
      z-index: 1;
    }

    .sg-activation-mode-toggle__switch-label {
      position: relative;
      z-index: 2;
      text-align: center;
      font-family: var(--font-family-base);
      font-size: var(--font-size-small);
      font-weight: var(--font-weight-regular);
      line-height: var(--layout-mode-toggle-local-height);
      text-transform: lowercase;
      color: var(--text-control-default);
    }

    .sg-activation-mode-toggle[data-active="absolute"] .sg-activation-mode-toggle__switch-label--left,
    .sg-activation-mode-toggle[data-active="relative"] .sg-activation-mode-toggle__switch-label--right {
      color: var(--text-toggle-label-active);
    }

    .sg-slider-row {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: var(--spacing-small);
      width: 100%;
      max-width: none;
    }

    .sg-slider-row .sg-label {
      min-width: var(--layout-input-label-width);
      flex: 0 0 var(--layout-input-label-width);
      color: var(--text-control-default);
    }

    .sg-slider {
      flex: 1 1 14rem;
      width: 100%;
      min-width: 0;
      max-width: var(--layout-input-field-max-width);
      height: var(--interaction-height);
      margin: 0;
      padding: 0;
      border: 0;
      -webkit-appearance: none;
      appearance: none;
      background: transparent;
      cursor: pointer;
    }

    .sg-slider::-webkit-slider-runnable-track {
      height: var(--dimension-slider-track-height);
      border-radius: var(--radius-slider-track);
      background:
        linear-gradient(
          to right,
          var(--surface-slider-progress) 0%,
          var(--surface-slider-progress) var(--sg-slider-progress, 0%),
          var(--surface-slider-track) var(--sg-slider-progress, 0%),
          var(--surface-slider-track) 100%
        );
    }

    .sg-slider::-webkit-slider-thumb {
      width: var(--dimension-slider-thumb-size);
      height: var(--dimension-slider-thumb-size);
      margin-top: var(--dimension-slider-thumb-offset-top);
      border: 0;
      border-radius: 50%;
      -webkit-appearance: none;
      appearance: none;
      background: var(--surface-slider-thumb);
    }

    .sg-slider::-moz-range-track {
      height: var(--dimension-slider-track-height);
      border: 0;
      border-radius: var(--radius-slider-track);
      background: var(--surface-slider-track);
    }

    .sg-slider::-moz-range-progress {
      height: var(--dimension-slider-track-height);
      border-radius: var(--radius-slider-track);
      background: var(--surface-slider-progress);
    }

    .sg-slider::-moz-range-thumb {
      width: var(--dimension-slider-thumb-size);
      height: var(--dimension-slider-thumb-size);
      border: 0;
      border-radius: 50%;
      background: var(--surface-slider-thumb);
    }

    .sg-slider-value {
      flex: 0 0 auto;
      min-width: calc(var(--interaction-height) * 1.25);
      white-space: nowrap;
      text-align: right;
      color: var(--text-control-default);
    }

    .sg-slider-row--inactive-selectable {
      opacity: var(--disabled-opacity);
    }

    #component-slider .sg-slider-row {
      display: grid;
      grid-template-columns:
        max-content
        minmax(0, 1fr)
        auto;
      align-items: center;
      column-gap: var(--spacing-large);
      width: 100%;
    }

    #component-slider .sg-state-example {
      grid-template-columns: calc(var(--interaction-height) * 6) minmax(0, 1fr);
      width: 100%;
    }

    #component-slider .sg-form-preview-area {
      width: 100%;
      box-sizing: border-box;
    }

    #component-slider .sg-state-example > :last-child {
      width: 100%;
      min-width: 0;
    }

    #component-slider .sg-slider-row .sg-label {
      min-width: 0;
      flex: 0 0 auto;
      grid-column: 1;
    }

    #component-slider .sg-slider-row .sg-slider {
      width: 100%;
      max-width: var(--layout-input-field-max-width);
      min-width: 0;
      grid-column: 2;
    }

    #component-slider .sg-state-example > .sg-slider-row,
    #component-slider .sg-activatable-row .sg-slider-row {
      max-width: var(--layout-input-field-max-width);
    }

    #component-slider .sg-slider-row .sg-slider-value {
      min-width: 0;
      grid-column: 3;
      justify-self: start;
      align-self: center;
      display: block;
      margin: 0;
      line-height: 1;
    }

    #component-slider .sg-activatable-row {
      display: grid;
      grid-template-columns: max-content minmax(0, 1fr);
      align-items: center;
      column-gap: var(--spacing-large);
      width: 100%;
    }

    #component-slider .sg-slider-activatable-header {
      display: grid;
      grid-template-columns: max-content max-content;
      column-gap: var(--spacing-large);
      align-items: center;
      width: 100%;
      justify-content: start;
    }

    #component-slider .sg-slider-activatable-header .sg-label {
      grid-column: 2;
      min-width: 0;
    }

    #component-slider .sg-slider-activatable-header .sg-mode-toggle {
      grid-column: 1;
    }

    #component-slider .sg-activatable-row .sg-slider-row {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: center;
      column-gap: var(--spacing-large);
      width: 100%;
    }

    #component-slider .sg-activatable-row .sg-slider-row .sg-slider {
      width: 100%;
      max-width: var(--layout-input-field-max-width);
      min-width: 0;
      grid-column: 1;
    }

    #component-slider .sg-activatable-row .sg-slider-row .sg-slider-value {
      grid-column: 2;
      justify-self: start;
      min-width: 0;
      align-self: center;
      display: block;
      margin: 0;
      line-height: 1;
    }

    .sg-pulldown-panel .sg-slider-row[data-activatable="true"] {
      display: grid;
      grid-template-columns:
        var(--layout-input-label-width)
        minmax(0, 1fr)
        auto;
      align-items: center;
      column-gap: var(--spacing-small);
    }

    .sg-pulldown-panel .sg-slider-row[data-activatable="true"] .sg-label {
      min-width: 0;
      flex: 0 0 auto;
      grid-column: 1;
      grid-row: 1;
    }

    .sg-pulldown-panel .sg-slider-row[data-activatable="true"] .sg-slider {
      min-width: 0;
      max-width: 100%;
      width: 100%;
      grid-column: 2;
      grid-row: 1;
    }

    .sg-pulldown-panel .sg-slider-row[data-activatable="true"] .sg-slider-value {
      min-width: calc(var(--interaction-height) * 1.25);
      justify-self: end;
      align-self: center;
      white-space: nowrap;
      grid-column: 3;
      grid-row: 1;
    }

    @media (max-width: 48rem) {
      #component-slider .sg-form-preview-area {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
      }

      #component-slider .sg-state-example {
        grid-template-columns: 1fr;
        align-items: start;
        width: 100%;
      }

      #component-slider .sg-state-example > :last-child {
        width: 100%;
        min-width: 0;
      }

      #component-slider .sg-activatable-row {
        grid-template-columns: 1fr;
        align-items: start;
        row-gap: var(--spacing-small);
      }

      #component-slider .sg-slider-activatable-header .sg-label {
        grid-column: 2;
        grid-row: 1;
      }

      #component-slider .sg-slider-activatable-header .sg-mode-toggle {
        grid-column: 1;
        grid-row: 1;
      }

      #component-slider .sg-activatable-row .sg-slider-row {
        grid-template-columns: minmax(0, 1fr) auto;
        column-gap: var(--spacing-large);
        align-items: center;
        width: 100%;
      }

      #component-slider .sg-activatable-row .sg-slider-row .sg-slider {
        width: 100%;
      }

      #component-slider .sg-activatable-row .sg-slider-row .sg-slider-value {
        justify-self: start;
        align-self: center;
        margin: 0;
        line-height: 1;
      }

    }

    .sg-sandwich-button {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: calc(var(--interaction-height) + var(--spacing-small));
      height: calc(var(--interaction-height) + var(--spacing-small));
      padding: 0;
      cursor: pointer;
    }

    .sg-sandwich-button--small {
      width: calc(var(--interaction-height) * 0.9);
      height: calc(var(--interaction-height) * 0.9);
    }

    .sg-sandwich-button__icon {
      width: var(--sandwich-line-width);
      height: auto;
      display: flex;
      flex-direction: column;
      gap: var(--sandwich-line-gap);
      justify-content: center;
    }

    .sg-sandwich-button__line {
      display: block;
      width: 100%;
      height: var(--sandwich-line-height);
      border-radius: var(--radius-interaction);
    }

    .sg-sandwich-menu-wrap[data-component-size="default"] .sg-sandwich-button__line {
      background: var(--icon-sandwich-line-portal);
    }

    .sg-sandwich-menu-wrap[data-component-size="small"] .sg-sandwich-button__line {
      height: calc(var(--sandwich-line-height) - 1px);
      background: var(--icon-sandwich-line-portal);
    }

    .sg-sandwich-menu-wrap[data-component-size="small"] .sg-sandwich-button__icon {
      display: block;
      width: calc(var(--sandwich-line-width) - 3px);
      height: calc(var(--sandwich-line-width) - 3px);
      background: url("../assets/icons/star-filled.svg") no-repeat center / contain;
    }

    .sg-sandwich-menu-wrap[data-component-size="small"] .sg-sandwich-button__line {
      display: none;
    }

    .sg-sandwich-menu-wrap {
      position: relative;
      display: inline-flex;
    }

    .sg-sandwich-menu-panel {
      position: absolute;
      top: calc(100% + var(--spacing-small));
      right: 0;
      display: none;
      flex-direction: column;
      gap: var(--spacing-small);
      width: max-content;
      padding: var(--spacing-large);
      border: var(--border-none);
      border-radius: var(--radius-card);
      box-shadow: var(--shadow-overlay);
      z-index: var(--layer-pulldown-panel);
    }

    .sg-sandwich-menu-wrap[data-component-size="default"] .sg-sandwich-menu-panel {
      background: var(--surface-menu-panel-portal);
    }

    .sg-sandwich-menu-wrap[data-component-size="small"] .sg-sandwich-menu-panel {
      background: var(--surface-menu-panel-portal);
    }

    .sg-sandwich-menu-wrap[data-open="true"] .sg-sandwich-menu-panel {
      display: flex;
    }

    .sg-sandwich-menu-link {
      margin: 0;
      text-decoration: none;
      white-space: nowrap;
      font-family: var(--font-family-base);
      font-size: var(--font-size-base);
      font-weight: var(--font-weight-regular);
      line-height: var(--line-height-base);
    }

    .sg-sandwich-menu-wrap[data-component-size="default"] .sg-sandwich-menu-link {
      color: var(--text-menu-link-portal);
    }

    .sg-sandwich-menu-wrap[data-component-size="small"] .sg-sandwich-menu-link {
      color: var(--text-menu-link-portal);
    }

    .sg-sandwich-menu-wrap[data-align="left"] .sg-sandwich-menu-panel {
      right: auto;
      left: 0;
    }

    .sg-sandwich-menu-wrap[data-align="right"] .sg-sandwich-menu-panel {
      right: 0;
      left: auto;
    }

    .sg-help-icon-wrap {
      position: relative;
      display: inline-flex;
      vertical-align: middle;
    }

    .sg-help-icon {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: var(--small-interaction-element-size);
      height: var(--small-interaction-element-size);
      padding: 0;
      border: var(--border-none);
      border-radius: 50%;
      box-shadow: var(--shadow-none);
      font-family: var(--font-family-base);
      font-size: var(--font-size-small);
      font-weight: var(--font-weight-semibold);
      line-height: 1;
      color: var(--text-help-icon);
      background: var(--surface-help-icon);
      cursor: pointer;
    }

    .sg-help-icon-panel {
      position: absolute;
      top: calc(100% + var(--spacing-small));
      left: 0;
      z-index: var(--layer-pulldown-panel);
      display: none;
      width: var(--layout-help-panel-width);
      max-width: calc(100vw - (2 * var(--spacing-large)));
      box-sizing: border-box;
      overflow-wrap: anywhere;
      padding: var(--spacing-large);
      border-radius: var(--radius-card);
      color: var(--text-help-panel);
      background: var(--surface-help-panel);
      box-shadow: var(--shadow-overlay);
    }

    @supports (width: 100dvw) {
      .sg-help-icon-panel {
        width: min(var(--layout-help-panel-width), calc(100dvw - (2 * var(--spacing-large))));
        max-width: calc(100dvw - (2 * var(--spacing-large)));
      }
    }

    .sg-help-icon-wrap[data-open="true"] .sg-help-icon-panel {
      display: block;
    }

    .sg-help-icon-wrap[data-open="true"] {
      z-index: var(--layer-pulldown-panel);
    }

    .sg-help-icon-wrap[data-align="left"] .sg-help-icon-panel {
      left: 0;
      right: auto;
    }

    .sg-help-icon-wrap[data-align="right"] .sg-help-icon-panel {
      left: auto;
      right: 0;
    }

    .sg-pulldown-panel {
      position: absolute;
      top: calc(100% + var(--spacing-small));
      left: 0;
      z-index: var(--layer-pulldown-panel);
      display: none;
      flex-direction: column;
      gap: var(--spacing-small);
      width: max-content;
      max-width: min(
        var(--layout-multiselect-pulldown-panel-desktop-width),
        calc(100vw - (2 * var(--spacing-large)))
      );
      box-sizing: border-box;
      padding-block: var(--spacing-large);
      padding-inline: var(--layout-pulldown-panel-padding-inline);
      border-radius: var(--radius-card);
      background: var(--surface-pulldown-panel);
      box-shadow: var(--shadow-overlay);
    }

    @supports (width: 100dvw) {
      .sg-pulldown-panel {
        max-width: min(
          var(--layout-multiselect-pulldown-panel-desktop-width),
          calc(100dvw - (2 * var(--spacing-large)))
        );
      }
    }

    .sg-pulldown-demo[data-open="true"] .sg-pulldown-panel {
      display: inline-flex;
    }

    .sg-pulldown-demo[data-align="left"] .sg-pulldown-panel {
      left: 0;
      right: auto;
    }

    .sg-pulldown-demo[data-align="right"] .sg-pulldown-panel {
      left: auto;
      right: 0;
    }

    @media (max-width: 48rem) {
      .sg-pulldown-panel {
        min-width: 0;
      }

      .sg-pulldown-demo[data-component-context="overlay"] .sg-pulldown-panel {
        left: auto;
        right: 0;
      }
    }

    .sg-pulldown-panel__row {
      display: grid;
      grid-template-columns: calc(var(--interaction-height) * 5) calc(var(--interaction-height) * 7) var(--interaction-height);
      gap: var(--spacing-small);
      align-items: center;
    }

    .sg-pulldown-panel__label {
      margin: 0;
      color: var(--text-control-default);
    }

.sg-pulldown-panel__remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
      width: var(--interaction-height);
      height: var(--interaction-height);
      padding: 0;
      border: var(--border-none);
      border-radius: var(--radius-interaction);
      background: var(--surface-activatable-remove);
  color: var(--text-activatable-remove);
  font-family: var(--font-family-base);
  font-size: var(--font-size-base);
  line-height: 1;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}

    .sg-pulldown-panel__remove[hidden] {
      display: none;
    }

    .sg-pulldown-panel__row--disabled {
      color: var(--text-control-disabled);
      opacity: var(--disabled-opacity);
      cursor: not-allowed;
    }

    .sg-pulldown-panel__row--disabled .sg-pulldown,
    .sg-pulldown-panel__row--disabled .sg-pulldown-panel__label {
      color: var(--text-control-disabled);
    }

    .sg-pulldown-option-list {
      display: flex;
      flex-direction: column;
      gap: var(--spacing-small);
      margin: 0;
      padding: 0;
      list-style: none;
    }

    .sg-pulldown-option {
      display: flex;
      gap: var(--spacing-small);
      align-items: flex-start;
      padding-block: var(--interaction-padding-vertical);
      padding-inline: var(--layout-pulldown-option-padding-inline);
      border-radius: var(--radius-interaction);
      white-space: normal;
      overflow-wrap: anywhere;
      color: var(--text-control-default);
      cursor: pointer;
    }

    .sg-pulldown-option--selected {
      background: var(--surface-control-active);
    }

    .sg-pulldown-option--disabled {
      color: var(--text-control-disabled);
    }

    .sg-pulldown-option__checkbox {
      width: var(--font-size-base);
      height: var(--font-size-base);
      margin: 0;
    }

    .sg-checkbox-field {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: var(--small-interaction-element-size);
      height: var(--small-interaction-element-size);
      padding: 0;
      border: var(--border-none);
      border-radius: var(--radius-interaction);
      box-shadow: var(--shadow-none);
      color: var(--text-control-default);
      background: var(--surface-checkbox-default);
      cursor: pointer;
    }

    .sg-checkbox-field--on-grey,
    .sg-checkbox-field--on-color {
      background: var(--surface-checkbox-on-context);
    }

    .sg-checkbox-field__mark {
      display: none;
      font-family: var(--font-family-base);
      font-size: var(--font-size-base);
      font-weight: var(--font-weight-semibold);
      line-height: 1;
    }

    .sg-checkbox-field[aria-checked="true"] .sg-checkbox-field__mark {
      display: inline;
    }

    .sg-checkbox-field.sg-form-active {
      background: var(--surface-control-active);
      color: var(--text-control-default);
    }

    .sg-checkbox-field--inactive-selectable {
      color: var(--text-control-default);
      background: var(--surface-control-inactive);
      opacity: var(--disabled-opacity);
    }

    .sg-checkbox-field--disabled {
      color: var(--text-control-disabled);
      background: var(--surface-control-disabled);
      opacity: var(--disabled-opacity);
      cursor: not-allowed;
    }

    .sg-checkbox-field-list {
      display: flex;
      flex-direction: column;
      gap: var(--spacing-small);
    }

    .sg-checkbox-field-option {
      display: inline-flex;
      align-items: center;
      gap: var(--spacing-small);
      color: var(--text-control-default);
      flex-wrap: wrap;
    }

    .sg-pulldown-panel__checkbox-list .sg-checkbox-field-option.sg-body {
      margin-bottom: 0;
    }

    #component-checkbox-field .sg-checkbox-field-option .sg-state-example__label,
    #component-radio-field .sg-checkbox-field-option .sg-state-example__label {
      flex: 0 0 100%;
      margin-bottom: var(--spacing-small);
    }

    .sg-checkbox-field-option--inactive-selectable {
      color: var(--text-control-default);
    }

    #component-checkbox-field .sg-checkbox-field-option[data-activatable="true"],
    #component-radio-field .sg-checkbox-field-option[data-activatable="true"] {
      gap: var(--spacing-large);
    }

    .sg-radio-activatable-group__choices {
      display: inline-flex;
      align-items: center;
      gap: var(--spacing-small);
    }

    .sg-radio-activatable-group__choice {
      display: inline-flex;
      align-items: center;
      gap: var(--spacing-small);
    }

    .sg-radio-activatable-group__choice > span {
      color: var(--text-control-default);
      opacity: 1;
    }

    #component-radio-activatable[data-component-state="inactive-selectable"] .sg-radio-activatable-group__choice > span {
      opacity: var(--disabled-opacity);
    }

    #component-radio-activatable[data-component-state="active"] .sg-radio-activatable-group__choice > span {
      opacity: 1;
    }

    #component-radio-field .sg-checkbox-field-option {
      display: grid;
      grid-template-columns: calc(var(--interaction-height) * 6) minmax(0, 1fr);
      align-items: center;
      column-gap: var(--spacing-small);
      width: 100%;
    }

    #component-radio-field .sg-checkbox-field-option .sg-state-example__label {
      grid-column: 1;
      margin-bottom: 0;
    }

    #component-radio-field .sg-radio-field-row {
      grid-column: 2;
      display: inline-flex;
      align-items: center;
      gap: var(--spacing-small);
      min-width: 0;
      flex-wrap: nowrap;
    }

    #component-radio-field .sg-radio-field-row > .sg-radio-activatable-group__choices {
      margin-left: var(--spacing-large);
    }

    #component-radio-field .sg-radio-field-row--without-label > .sg-radio-activatable-group__choices {
      margin-left: 0;
    }

    @media (max-width: 48rem) {
      #component-radio-field .sg-checkbox-field-option {
        grid-template-columns: 1fr;
        align-items: start;
      }

      #component-radio-field .sg-checkbox-field-option .sg-state-example__label,
      #component-radio-field .sg-radio-field-row {
        grid-column: 1;
      }

      #component-radio-field .sg-radio-field-row {
        flex-wrap: wrap;
      }

      #component-radio-field .sg-radio-field-row > .sg-radio-activatable-group__choices {
        flex: 0 0 100%;
        margin-left: 0;
      }
    }

    .sg-checkbox-field-option--disabled {
      color: var(--text-control-disabled);
      opacity: var(--disabled-opacity);
      cursor: not-allowed;
    }

    .sg-radio-field {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: var(--small-interaction-element-size);
      height: var(--small-interaction-element-size);
      padding: 0;
      border: var(--border-none);
      border-radius: 50%;
      box-shadow: var(--shadow-none);
      color: var(--text-control-default);
      background: var(--surface-radio-default);
      cursor: pointer;
    }

    .sg-radio-field__mark {
      display: none;
      width: calc(var(--small-interaction-element-size) * 0.44);
      height: calc(var(--small-interaction-element-size) * 0.44);
      border-radius: 50%;
      background: var(--icon-radio-mark);
    }

    .sg-radio-field[aria-checked="true"] .sg-radio-field__mark {
      display: block;
    }

    .sg-radio-field--inactive-selectable {
      color: var(--text-control-default);
      background: var(--surface-radio-default);
      opacity: var(--disabled-opacity);
    }

    .sg-radio-field--disabled {
      color: var(--text-control-disabled);
      background: var(--surface-control-disabled);
      opacity: var(--disabled-opacity);
      cursor: not-allowed;
    }

    .sg-hyperlink {
      color: var(--text-hyperlink);
      text-decoration: none;
    }

/* ========================================================= */
/* Patterns: Portal Header                                   */
/* ========================================================= */

.sg-portal-header {
  --surface-tab-selected: var(--surface-portal-header-tab);
  --surface-tab-unselected: var(--surface-portal-header-tab-active);
  --text-tab-selected: var(--text-portal-header-tab);
  --text-tab-unselected: var(--text-portal-header-tab-active);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-large);
  padding:
    var(--card-segment-padding-vertical)
    var(--layout-page-content-inset-inline);
  border: var(--border-none);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-none);
  background: var(--surface-portal-header);
}

.sg-portal-header--auth-segment {
  flex-direction: column;
  align-items: stretch;
  gap: var(--spacing-small);
}

.sg-portal-header--auth-segment .sg-portal-header__auth-row {
  display: flex;
  justify-content: flex-end;
  width: 100%;
}

.sg-portal-header__main {
  display: grid;
  flex: 1 1 auto;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "brand menu"
    "tabs tabs";
  gap: var(--spacing-large);
  min-width: 0;
}

.sg-portal-header__brand {
  grid-area: brand;
  margin: 0;
  padding-left: 0;
  font-size: var(--font-size-portal-header-brand);
  color: var(--text-portal-header-brand);
}

.sg-portal-header__tabs {
  grid-area: tabs;
  width: 100%;
}

.sg-portal-header__menu-wrap {
  grid-area: menu;
  justify-self: end;
}

.sg-portal-header--auth-segment .sg-portal-header__main {
  width: 100%;
}

.sg-portal-header-pattern-variant {
  margin-bottom: var(--spacing-large);
}

.sg-portal-header-pattern-variant__label {
  margin: 0 0 var(--spacing-small) 0;
}

.sg-portal-header-pattern-variant__next-element {
  margin-top: var(--spacing-large);
}

@media (max-width: calc(var(--layout-object-card-desktop-breakpoint) - 1px)) {
  .sg-portal-header__main {
    gap: var(--spacing-small) var(--spacing-large);
  }
}

@media (max-width: 48rem) {
  .sg-portal-header__brand {
    font-size: calc(var(--font-size-portal-header-brand) * 0.8);
  }
}

/* ========================================================= */
/* Patterns: Options Row                                     */
/* ========================================================= */

.sg-options-row {
  --surface-control-default: var(--surface-options-row-control);
  --surface-control-active: var(--surface-options-row-control-selected);
  --surface-input-clear: var(--surface-options-row-input-clear);
  --surface-toggle-track: var(--surface-options-row-toggle-track);
  --surface-toggle-handle: var(--surface-options-row-toggle-handle);
  --surface-help-icon: var(--surface-options-row-help-icon);
  --surface-help-panel: var(--surface-options-row-help-panel);
  --text-control-default: var(--text-options-row-default);
  --text-control-disabled: var(--text-options-row-placeholder);
  --text-help-icon: var(--text-options-row-help-icon);
  --text-help-panel: var(--text-options-row-help-panel);
  --layout-mode-toggle-width: var(--layout-options-row-mode-toggle-width);
  --layout-help-panel-width: var(--layout-options-row-help-panel-width);
  margin-top: var(--layout-options-row-margin-top);
  display: flex;
  justify-content: space-between;
  gap: var(--layout-options-row-main-gap);
  padding:
    var(--card-segment-padding-vertical)
    var(--layout-page-content-inset-inline);
  border: var(--border-none);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-none);
  background: var(--surface-options-row);
}

.sg-options-row--left-only {
  justify-content: flex-start;
}

.sg-options-row__left,
.sg-options-row__right {
  display: flex;
  flex-wrap: wrap;
  gap: var(--layout-options-row-group-gap);
  align-items: center;
}

.sg-options-row__left {
  justify-content: flex-start;
}

.sg-options-row__right {
  justify-content: flex-end;
  flex-wrap: nowrap;
  margin-left: auto;
}

.sg-options-row__left > .sg-search-field-row {
  flex: 0 0 auto;
}

@media (max-width: 48rem) {
  .sg-options-row {
    flex-direction: column;
    gap: 0;
    padding: 0;
  }

  .sg-options-row__right,
  .sg-options-row__left {
    padding:
      var(--card-segment-padding-vertical)
      var(--card-segment-padding-horizontal);
  }

  .sg-options-row__right {
    order: 1;
    justify-content: flex-end;
    flex-wrap: nowrap;
    margin-left: 0;
  }

  .sg-options-row__left {
    order: 2;
    box-shadow: inset 0 1px 0 var(--divider-options-row-mobile);
  }

  .sg-options-row--left-only {
    flex-direction: row;
    gap: var(--layout-options-row-main-gap);
    padding:
      var(--card-segment-padding-vertical)
      var(--layout-page-content-inset-inline);
  }

  .sg-options-row--left-only .sg-options-row__left {
    order: 0;
    padding: 0;
    box-shadow: none;
  }

  .sg-options-row__left > .sg-pulldown-demo,
  .sg-options-row__left > .sg-input-single-line-wrap,
  .sg-options-row__left > .sg-search-field-row {
    flex: 1 1 calc(50% - var(--layout-options-row-group-gap));
    min-width: 0;
  }

  .sg-options-row__left > .sg-search-field-row {
    flex: 0 0 auto;
  }

  .sg-options-row__left > .sg-input-single-line-wrap .sg-input-single-line,
  .sg-options-row__left > .sg-pulldown-demo .sg-pulldown {
    width: 100%;
  }

  .sg-options-row[data-pattern="multiselektions-pulldown"] .sg-pulldown-panel {
    width: min(
      var(--layout-pulldown-panel-form-mobile-width),
      calc(100vw - (2 * var(--spacing-large)))
    );
    min-width: 0;
    max-width: calc(100vw - (2 * var(--spacing-large)));
  }

  .sg-options-row .sg-pulldown-panel .sg-form-sections-card-wrapper,
  .sg-options-row .sg-pulldown-panel .sg-form-sections-card {
    min-width: 0;
    width: 100%;
    max-width: 100%;
  }

  .sg-pulldown-panel .sg-slider-row[data-activatable="true"] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: var(--spacing-large);
    row-gap: var(--spacing-small);
  }

  .sg-pulldown-panel .sg-slider-row[data-activatable="true"] .sg-label {
    min-width: 100%;
    flex: 0 0 100%;
  }

  .sg-pulldown-panel .sg-slider-row[data-activatable="true"] .sg-slider {
    min-width: 0;
    max-width: 100%;
    width: 100%;
    flex: 1 1 0;
  }

  .sg-pulldown-panel .sg-slider-row[data-activatable="true"] .sg-slider-value {
    min-width: calc(var(--interaction-height) * 1.25);
    align-self: center;
    white-space: nowrap;
    flex: 0 0 auto;
  }

  .sg-pulldown-panel__row {
    grid-template-columns: minmax(0, 1fr) var(--interaction-height);
  }

  .sg-pulldown-panel__label {
    grid-column: 1 / -1;
  }
}

/* ========================================================= */
/* Patterns: Object Card                                     */
/* ========================================================= */

.sg-object-card-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-small);
  align-items: flex-start;
  width: 100%;
}

.sg-object-card {
  display: flex;
  flex-direction: column;
  flex: 1 1 var(--layout-object-card-min-width);
  min-width: var(--layout-object-card-min-width);
  max-width: var(--layout-object-card-max-width);
  height: var(--layout-object-card-height);
}

.sg-object-card-grid.sg-object-card-grid--multi-row .sg-object-card {
  flex: 0 0 var(--layout-object-card-shared-width);
  width: var(--layout-object-card-shared-width);
}

@media (max-width: 767px) {
  .sg-object-card {
    width: var(--layout-object-card-mobile-width);
    min-width: 0;
    max-width: none;
    height: var(--layout-object-card-mobile-height);
  }

  .sg-object-card[data-pattern="object-group-card"] {
    flex-basis: 100%;
    width: 100%;
    min-width: 0;
    max-width: none;
  }
}

.sg-object-card__content {
  flex: var(--layout-object-card-content-grow) 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  background: var(--color-white);
}

.sg-object-card__header {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}

.sg-object-card__actions {
  display: flex;
  gap: var(--spacing-small);
  width: 100%;
  margin-top: 0;
}

.sg-object-card__action {
  flex: 1 1 0;
  min-width: 0;
}

.sg-object-card--variable-height {
  height: auto;
}

.sg-object-card--content-basic {
  width: min(70vw, var(--layout-object-card-max-width));
  margin-inline: auto;
  height: auto;
}

.sg-object-card-content-basic {
  margin-top: var(--layout-content-card-margin-top-desktop);
}

@media (max-width: 767px) {
  .sg-object-card--content-basic {
    width: var(--layout-object-card-mobile-width);
    min-width: 0;
    max-width: none;
  }

  .sg-object-card-content-basic {
    margin-top: var(--layout-content-card-margin-top-mobile);
  }
}

/* ========================================================= */
/* Patterns: Object Group Card                               */
/* ========================================================= */

.sg-object-group-card__actions {
  margin-top: auto;
}

.sg-object-card[data-pattern="object-group-card"] {
  flex: 1 1 var(--layout-object-group-card-min-width);
  min-width: var(--layout-object-group-card-min-width);
  max-width: var(--layout-object-group-card-max-width);
  height: var(--layout-object-group-card-height);
}

.sg-list-group-card--height-600 .sg-object-card[data-pattern="object-group-card"] {
  height: var(--layout-object-card-height);
}

@media (max-width: 767px) {
  .sg-object-card[data-pattern="object-group-card"] {
    height: auto;
  }

  .sg-list-group-card--height-600 .sg-object-card[data-pattern="object-group-card"] {
    height: auto;
  }
}

.sg-object-group-card__hint {
  color: var(--color-font-light);
}

.sg-company-card__header-title {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-large);
  min-width: 0;
}

.sg-company-card__header-star {
  display: inline-block;
  flex: 0 0 auto;
  inline-size: 1em;
  block-size: 1em;
  background: url("../assets/icons/star-filled-white.svg") no-repeat center / contain;
}

.sg-company-card__metric-negative {
  color: var(--text-company-card-data-negative);
}

.sg-company-card__analysis-title {
  margin: 0;
}

.sg-company-card__analysis-bars {
  margin-top: 0;
}

.sg-company-card__moat-row {
  display: contents;
}

.sg-company-card__moat-value {
  justify-self: start;
  text-align: left;
}

.sg-company-card__moat-neutral {
  color: var(--text-company-card-moat-neutral);
}

.sg-company-card__summary {
  margin: 0;
}

/* ========================================================= */
/* Patterns: Navigation Card                                 */
/* ========================================================= */


/* ========================================================= */
/* Patterns: Formular mit Abschnitten                        */
/* ========================================================= */

.sg-form-sections-card {
  --layout-form-sections-label-column-width: var(--layout-input-label-width);
  --layout-form-sections-interaction-indent: calc(
    var(--layout-form-sections-label-column-width) + var(--spacing-large)
  );
  display: flex;
  flex-direction: column;
  width: 100%;
  background: var(--surface-form-preview);
  min-width: min(
    100%,
    calc(var(--layout-form-sections-label-column-width) + var(--spacing-small) + var(--layout-input-field-desktop-width))
  );
  max-width: calc(
    var(--layout-form-sections-label-column-width) + var(--spacing-small) + var(--layout-form-input-field-max-width)
  );
}

.sg-form-sections-card-wrapper {
  display: flex;
  justify-content: center;
  width: 100%;
  height: auto;
}

.sg-form-sections-card__body {
  padding: 0;
}

.sg-form-sections-card__title {
  margin: 0 0 var(--spacing-large) 0;
}

.sg-form-sections-card__actions-segment {
  margin-top: var(--spacing-large);
  padding: 0;
}

.sg-form-sections-card__chapter + .sg-form-sections-card__chapter {
  margin-top: calc(var(--spacing-large) * 2);
}

.sg-form-sections-card__chapter-title,
.sg-form-sections-card__sentence {
  margin: 0;
}

.sg-form-sections-card__sentence {
  margin-top: var(--spacing-small);
}

.sg-form-sections-card__option-group,
.sg-form-sections-card__field-group {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-small);
  margin-top: var(--spacing-large);
}

.sg-form-sections-card__field-group {
  gap: var(--spacing-large);
}

.sg-form-sections-card .sg-labeled-input-row .sg-label {
  min-width: var(--layout-form-sections-label-column-width);
  flex: 0 0 var(--layout-form-sections-label-column-width);
  margin-right: var(--spacing-large);
}

.sg-form-sections-card__option-group,
.sg-form-sections-card__actions {
  padding-left: var(--layout-form-sections-interaction-indent);
}

.sg-options-row[data-pattern="multiselektions-pulldown"] .sg-form-sections-card__chapter > :not(.sg-form-sections-card__chapter-title) + :not(.sg-form-sections-card__chapter-title) {
  margin-top: var(--spacing-large);
}

.sg-options-row[data-pattern="multiselektions-pulldown"] .sg-form-sections-card__chapter > .sg-form-sections-card__chapter-title + * {
  margin-top: var(--spacing-large);
}

.sg-options-row[data-pattern="multiselektions-pulldown"] .sg-form-sections-card__chapter > .sg-slider-row + .sg-slider-row,
.sg-options-row[data-pattern="multiselektions-pulldown"] .sg-form-sections-card__chapter > .sg-checkbox-field-option + .sg-checkbox-field-option,
.sg-options-row[data-pattern="multiselektions-pulldown"] .sg-form-sections-card__chapter > .sg-radio-activatable-group + .sg-radio-activatable-group {
  margin-top: var(--spacing-small);
}

.sg-options-row[data-pattern="multiselektions-pulldown"] .sg-form-sections-card__chapter > .sg-pulldown-panel__row + .sg-pulldown-panel__row {
  margin-top: var(--spacing-large);
}

.sg-options-row[data-pattern="multiselektions-pulldown"] .sg-pulldown-panel {
  --sg-multiselect-label-column-width: var(--layout-multiselect-pulldown-label-column-width-fallback);
}

.sg-options-row[data-pattern="multiselektions-pulldown"] .sg-slider-row[data-activatable="true"] > .sg-label,
.sg-options-row[data-pattern="multiselektions-pulldown"] .sg-radio-activatable-group > .sg-label,
.sg-options-row[data-pattern="multiselektions-pulldown"] [data-pulldown-filter-row] > .sg-pulldown-panel__label {
  white-space: nowrap;
}

.sg-options-row[data-pattern="multiselektions-pulldown"] .sg-slider-row[data-activatable="true"] {
  display: grid;
  grid-template-columns: max-content var(--sg-multiselect-label-column-width) minmax(0, 1fr) auto;
  align-items: center;
  column-gap: var(--spacing-large);
}

.sg-options-row[data-pattern="multiselektions-pulldown"] .sg-slider-row[data-activatable="true"].sg-slider-row--inactive-selectable {
  opacity: 1;
}

.sg-options-row[data-pattern="multiselektions-pulldown"] .sg-slider-row[data-activatable="true"].sg-slider-row--inactive-selectable .sg-slider {
  opacity: var(--disabled-opacity);
}

.sg-options-row[data-pattern="multiselektions-pulldown"] .sg-slider-row[data-activatable="true"].sg-slider-row--inactive-selectable .sg-label,
.sg-options-row[data-pattern="multiselektions-pulldown"] .sg-slider-row[data-activatable="true"].sg-slider-row--inactive-selectable .sg-slider-value,
.sg-options-row[data-pattern="multiselektions-pulldown"] .sg-radio-activatable-group[data-component-state="inactive-selectable"] > .sg-label,
.sg-options-row[data-pattern="multiselektions-pulldown"] .sg-radio-activatable-group[data-component-state="inactive-selectable"] > .sg-radio-activatable-group__choices {
  opacity: var(--disabled-opacity);
}

.sg-options-row[data-pattern="multiselektions-pulldown"] .sg-slider-row[data-activatable="true"] .sg-mode-toggle {
  grid-column: 1;
}

.sg-options-row[data-pattern="multiselektions-pulldown"] .sg-slider-row[data-activatable="true"] .sg-label {
  grid-column: 2;
  min-width: 0;
}

.sg-options-row[data-pattern="multiselektions-pulldown"] .sg-slider-row[data-activatable="true"] .sg-slider {
  grid-column: 3;
  min-width: 0;
  width: 100%;
  max-width: none;
}

.sg-options-row[data-pattern="multiselektions-pulldown"] .sg-slider-row[data-activatable="true"] .sg-slider-value {
  grid-column: 4;
  margin: 0;
  min-width: 0;
  line-height: 1;
}

.sg-options-row[data-pattern="multiselektions-pulldown"] .sg-slider-row[data-activatable="true"] {
  -webkit-tap-highlight-color: transparent;
}

.sg-options-row[data-pattern="multiselektions-pulldown"] .sg-radio-activatable-group {
  display: grid;
  grid-template-columns: max-content var(--sg-multiselect-label-column-width) minmax(0, 1fr);
  align-items: center;
  column-gap: var(--spacing-large);
}

.sg-options-row[data-pattern="multiselektions-pulldown"] .sg-radio-activatable-group > .sg-label {
  grid-column: 2;
  margin: 0;
}

.sg-options-row[data-pattern="multiselektions-pulldown"] .sg-radio-activatable-group > .sg-mode-toggle {
  grid-column: 1;
}

.sg-options-row[data-pattern="multiselektions-pulldown"] .sg-radio-activatable-group > .sg-radio-activatable-group__choices {
  grid-column: 3;
}

.sg-options-row[data-pattern="multiselektions-pulldown"] .sg-radio-activatable-group[data-component-state="inactive-selectable"] > .sg-radio-activatable-group__choices {
  pointer-events: none;
}

.sg-options-row[data-pattern="multiselektions-pulldown"] .sg-slider-row[data-activatable="true"].sg-slider-row--inactive-selectable > :not(.sg-mode-toggle),
.sg-options-row[data-pattern="multiselektions-pulldown"] .sg-radio-activatable-group[data-component-state="inactive-selectable"] > :not(.sg-mode-toggle),
.sg-options-row[data-pattern="multiselektions-pulldown"] [data-pulldown-filter-row].sg-pulldown-panel__row--disabled > :not(.sg-mode-toggle) {
  pointer-events: none;
}

.sg-options-row[data-pattern="multiselektions-pulldown"] [data-pulldown-filter-row] {
  grid-template-columns: max-content var(--sg-multiselect-label-column-width) minmax(0, 1fr);
  column-gap: var(--spacing-large);
}

.sg-options-row[data-pattern="multiselektions-pulldown"] [data-pulldown-filter-row] > .sg-mode-toggle {
  grid-column: 1;
}

.sg-options-row[data-pattern="multiselektions-pulldown"] [data-pulldown-filter-row] > .sg-pulldown-panel__label {
  grid-column: 2;
}

.sg-options-row[data-pattern="multiselektions-pulldown"] [data-pulldown-filter-row] > .sg-pulldown {
  grid-column: 3;
}

.sg-options-row[data-pattern="multiselektions-pulldown"] [data-pulldown-filter-row].sg-pulldown-panel__row--disabled {
  opacity: 1;
}

.sg-options-row[data-pattern="multiselektions-pulldown"] [data-pulldown-filter-row].sg-pulldown-panel__row--disabled > .sg-pulldown-panel__label,
.sg-options-row[data-pattern="multiselektions-pulldown"] [data-pulldown-filter-row].sg-pulldown-panel__row--disabled > .sg-pulldown {
  opacity: var(--disabled-opacity);
}

.sg-options-row[data-pattern="multiselektions-pulldown"] .sg-pulldown-demo .sg-pulldown-panel {
  min-width: 100%;
  width: max-content;
  max-width: calc(100vw - (2 * var(--spacing-large)));
}

@media (max-width: 48rem) {
  .sg-options-row[data-pattern="multiselektions-pulldown"] .sg-pulldown-panel {
    min-width: 100%;
    width: max-content;
    max-width: calc(100vw - (2 * var(--spacing-large)));
  }

  .sg-options-row[data-pattern="multiselektions-pulldown"] .sg-slider-row[data-activatable="true"] {
    grid-template-columns: max-content minmax(0, 1fr) auto;
    row-gap: var(--spacing-small);
  }

  .sg-options-row[data-pattern="multiselektions-pulldown"] .sg-slider-row[data-activatable="true"] > .sg-label,
  .sg-options-row[data-pattern="multiselektions-pulldown"] .sg-radio-activatable-group > .sg-label,
  .sg-options-row[data-pattern="multiselektions-pulldown"] [data-pulldown-filter-row] > .sg-pulldown-panel__label {
    white-space: normal;
  }

  .sg-options-row[data-pattern="multiselektions-pulldown"] .sg-slider-row[data-activatable="true"] .sg-mode-toggle {
    grid-column: 1;
    grid-row: 1;
  }

  .sg-options-row[data-pattern="multiselektions-pulldown"] .sg-slider-row[data-activatable="true"] .sg-label {
    grid-column: 2;
    grid-row: 1;
  }

  .sg-options-row[data-pattern="multiselektions-pulldown"] .sg-slider-row[data-activatable="true"] .sg-slider {
    grid-column: 1 / 3;
    grid-row: 2;
  }

  .sg-options-row[data-pattern="multiselektions-pulldown"] .sg-slider-row[data-activatable="true"] .sg-slider-value {
    grid-column: 3;
    grid-row: 2;
  }

  .sg-options-row[data-pattern="multiselektions-pulldown"] .sg-radio-activatable-group {
    grid-template-columns: max-content minmax(0, 1fr);
    row-gap: var(--spacing-small);
  }

  .sg-options-row[data-pattern="multiselektions-pulldown"] .sg-radio-activatable-group > .sg-label {
    grid-column: 2;
    grid-row: 1;
  }

  .sg-options-row[data-pattern="multiselektions-pulldown"] .sg-radio-activatable-group > .sg-mode-toggle {
    grid-column: 1;
    grid-row: 1;
  }

  .sg-options-row[data-pattern="multiselektions-pulldown"] .sg-radio-activatable-group > .sg-radio-activatable-group__choices {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .sg-options-row[data-pattern="multiselektions-pulldown"] [data-pulldown-filter-row] {
    grid-template-columns: max-content minmax(0, 1fr);
    row-gap: var(--spacing-small);
  }

  .sg-options-row[data-pattern="multiselektions-pulldown"] [data-pulldown-filter-row] > .sg-mode-toggle {
    grid-column: 1;
    grid-row: 1;
  }

  .sg-options-row[data-pattern="multiselektions-pulldown"] [data-pulldown-filter-row] > .sg-pulldown-panel__label {
    grid-column: 2;
    grid-row: 1;
  }

  .sg-options-row[data-pattern="multiselektions-pulldown"] [data-pulldown-filter-row] > .sg-pulldown {
    grid-column: 1 / -1;
    grid-row: 2;
  }
}

.sg-form-sections-card__actions {
  display: flex;
  width: 100%;
  justify-content: flex-end;
  gap: var(--spacing-small);
  margin-top: 0;
  padding-left: 0;
  padding-right: 0;
}

.sg-form-sections-card__action {
  width: auto;
}

.sg-navigation-card-layout {
  width: 100%;
  margin-top: var(--spacing-large);
}

.sg-navigation-card-block {
  --surface-card: var(--surface-navigation-card);
  --surface-card-body: var(--surface-navigation-card-body);
  display: block;
  flex: none;
  min-width: 0;
  max-width: none;
  width: 100%;
}

.sg-navigation-card-center {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.sg-content-cards-group {
  display: flex;
  flex-direction: column;
  gap: var(--layout-content-cards-group-gap);
}

@media (max-width: 48rem) {
  .sg-form-sections-card .sg-labeled-input-row .sg-label {
    min-width: 0;
    flex: 0 0 auto;
    margin-right: 0;
  }

  .sg-form-sections-card__option-group {
    padding-left: 0;
  }
}

/* ========================================================= */
/* Patterns: VSF List Card                                   */
/* ========================================================= */

#layout-vsf-list-card .sg-vsf-list-card-limit-note {
  margin: 0 0 var(--space-16) 0;
  color: var(--text-vsf-list-card-limit-note);
}

#layout-vsf-list-card .sg-vsf-list-card__summary {
  margin: var(--layout-vsf-list-card-summary-offset-block-start) 0 0 0;
}

.sg-vsf-list-card-context[data-pattern="overlay-card"] {
  --layout-delete-confirmation-target-max-width: var(--layout-vsf-list-card-delete-confirmation-target-max-width);
}

/* ========================================================= */
/* Patterns: Overlay Card                                    */
/* ========================================================= */

.sg-delete-confirmation-pattern {
  width: 100%;
  max-width: var(--layout-delete-confirmation-target-max-width);
}

.sg-delete-confirmation-pattern__stage {
  position: relative;
  overflow: visible;
}

.sg-delete-confirmation-pattern__host {
  display: flex;
  flex-direction: column;
}

.sg-delete-confirmation-pattern__host > .sg-delete-confirmation-pattern__target {
  flex: 1 1 auto;
}

.sg-delete-confirmation-pattern__target {
  position: relative;
  overflow: visible;
}

.sg-delete-confirmation-pattern__target::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--surface-delete-confirmation-target-dim-overlay);
  opacity: 0;
  pointer-events: none;
}

.sg-delete-confirmation-pattern__stage[data-dialog-open="true"] .sg-delete-confirmation-pattern__target::after {
  opacity: var(--layout-delete-confirmation-target-dim-opacity);
  pointer-events: auto;
}

.sg-delete-confirmation-pattern__floating-card {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: calc(100% * var(--layout-delete-confirmation-overlay-width-factor));
  box-sizing: border-box;
  max-width: calc(100% * var(--layout-delete-confirmation-overlay-width-factor));
  height: var(--layout-delete-confirmation-overlay-height, auto);
  overflow: hidden;
  z-index: var(--layer-delete-confirmation-overlay);
  box-shadow: var(--shadow-overlay);
}

.sg-delete-confirmation-pattern__floating-card.sg-card.sg-card--overlay-host {
  overflow: hidden;
}

.sg-delete-confirmation-pattern__floating-card[hidden] {
  display: none;
}

.sg-delete-confirmation-pattern__body {
  display: flex;
  flex-direction: column;
  gap: var(--layout-delete-confirmation-content-gap);
  background: var(--surface-delete-confirmation-overlay);
}

.sg-delete-confirmation-pattern__scroll-region {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
  flex-direction: column;
  overflow: auto;
}

.sg-delete-confirmation-pattern__actions-segment {
  border-bottom-left-radius: var(--radius-card);
  border-bottom-right-radius: var(--radius-card);
  flex: 0 0 auto;
}

.sg-delete-confirmation-pattern__list {
  display: grid;
  gap: var(--spacing-small);
  margin: 0;
  margin-top: var(--spacing-large);
  padding: 0;
  list-style: none;
}

.sg-delete-confirmation-pattern__list-item {
  margin: 0;
}

.sg-delete-confirmation-pattern__list-button {
  display: inline-flex;
  width: 100%;
  justify-content: flex-start;
  gap: var(--spacing-small);
  font-weight: var(--font-weight-regular);
  color: var(--text-delete-confirmation-overlay);
  background: var(--surface-control-inactive);
}

.sg-delete-confirmation-pattern__list-button[data-selected="true"] {
  background: var(--surface-control-active);
}

.sg-delete-confirmation-pattern__list-button[data-selected="false"] {
  background: var(--surface-control-inactive);
}

.sg-delete-confirmation-pattern__list-icon {
  display: block;
  flex: 0 0 auto;
  width: 1rem;
  height: 1rem;
  background: center / contain no-repeat;
}

.sg-delete-confirmation-pattern__list-button[data-selected="true"] .sg-delete-confirmation-pattern__list-icon {
  background-image: url("../assets/icons/star-filled.svg");
}

.sg-delete-confirmation-pattern__list-button[data-selected="false"] .sg-delete-confirmation-pattern__list-icon {
  background-image: url("../assets/icons/star-outline.svg");
}

.sg-delete-confirmation-pattern__create-list-form {
  margin-top: 0;
}

.sg-delete-confirmation-pattern__create-list-segment {
  gap: 0;
}

.sg-delete-confirmation-pattern__create-list-title {
  margin: 0 0 var(--spacing-large) 0;
}

.sg-delete-confirmation-pattern__create-list-form[hidden] {
  display: none;
}

.sg-delete-confirmation-pattern__create-list-segment[hidden] {
  display: none;
}

.sg-delete-confirmation-pattern__text {
  margin: 0;
  color: var(--text-delete-confirmation-overlay);
}

.sg-delete-confirmation-pattern__code {
  font-weight: var(--font-weight-semibold);
}

.sg-delete-confirmation-pattern__input-row {
  margin: var(--spacing-large) 0 0 0;
}

.sg-delete-confirmation-pattern__actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--layout-delete-confirmation-actions-gap);
  margin-top: var(--layout-delete-confirmation-actions-offset-block-start);
}

.sg-delete-confirmation-pattern__actions--footer {
  margin-top: 0;
}

.sg-delete-confirmation-pattern__scroll-region > .sg-delete-confirmation-pattern__create-list-segment {
  flex: 0 0 auto;
}

.sg-delete-confirmation-pattern__create-list-toggle {
  width: 100%;
}

@media (max-width: 48rem) {
  .sg-delete-confirmation-pattern__actions {
    flex-wrap: wrap;
  }
}

/* ========================================================= */
/* Patterns: Notifications                                   */
/* ========================================================= */

.sg-notifications-pattern {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-small);
  align-items: flex-start;
  width: 100%;
}

.sg-notifications-pattern__card {
  flex: 0 0 100%;
  width: 100%;
  min-width: 0;
  max-width: none;
}

/* Dokumentierte Pattern-Variante: Notifications innerhalb Group Card */
.sg-notifications-pattern.sg-group-card > .sg-notifications-pattern__card {
  flex: 0 0 100%;
  width: 100%;
  min-width: 0;
  max-width: none;
}

.sg-notifications-pattern.sg-notifications-pattern--multi-row .sg-notifications-pattern__card {
  flex: 0 0 100%;
  width: 100%;
}

.sg-notifications-pattern__card > .sg-notifications-pattern__text-segment {
  height: auto;
}

.sg-notifications-pattern__card > .sg-notifications-pattern__title-segment {
  height: auto;
}

.sg-notifications-pattern__card > .sg-notifications-pattern__text-segment.sg-notifications-pattern__text-segment--small {
  height: auto;
}

.sg-vsf-meldungen-layout {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--spacing-small);
  align-items: start;
  width: 100%;
}

.sg-vsf-meldungen-layout > .sg-group-card {
  min-width: 0;
}

.sg-vsf-meldungen-mobile {
  display: none;
}

.sg-vsf-meldungen-mobile__panels {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-small);
  width: 100%;
}

.sg-vsf-meldungen-mobile__panel {
  width: 100%;
}

@media (max-width: 767px) {
  .sg-vsf-meldungen-layout {
    display: none;
  }

  .sg-vsf-meldungen-mobile {
    display: flex;
    width: 100%;
  }

  .sg-notifications-pattern__card {
    width: 100%;
    min-width: 0;
    max-width: none;
    flex: 1 1 auto;
  }

  .sg-notifications-pattern__card > .sg-notifications-pattern__text-segment,
  .sg-notifications-pattern__card > .sg-notifications-pattern__title-segment,
  .sg-notifications-pattern__card > .sg-notifications-pattern__text-segment.sg-notifications-pattern__text-segment--small {
    height: auto;
  }
}

/* ========================================================= */
/* Patterns: Left Navigation                                 */
/* ========================================================= */

.sg-left-navigation-pattern {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-small);
}

.sg-left-navigation-pattern__layout {
  display: flex;
  align-items: flex-start;
  gap: 0;
  width: 100%;
  min-width: 0;
}

.sg-left-navigation-pattern__header-row {
  display: none;
}

.sg-left-navigation-pattern__toggle {
  display: none;
}

.sg-left-navigation-pattern__menu--collapsed {
  display: none;
}

.sg-left-navigation-pattern__group-card {
  min-width: 0;
}

.sg-left-navigation-pattern__group-card--navigation {
  flex: 0 0 15vw;
  width: 15vw;
  max-width: 15vw;
  padding: var(--spacing-small);
  margin: 0 var(--spacing-small) var(--spacing-small) 0;
}

.sg-left-navigation-pattern__group-card--content {
  flex: 1 1 auto;
}

.sg-left-navigation-pattern__group-card--content .sg-group-card__heading {
  flex: 0 1 auto;
  width: auto;
  margin-left: 0;
}

@media (min-width: 768px) {
  .sg-left-navigation-pattern__group-card--navigation .sg-tab-button-group[data-component-variant="linksmenu-items"] {
    justify-content: flex-start;
  }
}

@media (max-width: 767px) {
  .sg-left-navigation-pattern__layout {
    flex-direction: column;
  }

  .sg-left-navigation-pattern__header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-small);
    margin-bottom: 0;
  }

  .sg-left-navigation-pattern__toggle {
    display: inline-flex;
    flex: 0 0 auto;
  }

  .sg-left-navigation-pattern__group-card--navigation {
    flex: 0 0 auto;
    width: 100%;
    max-width: none;
    margin: 0;
  }

  .sg-left-navigation-pattern__group-card--content {
    margin-top: var(--spacing-small);
  }
}

/* ========================================================= */
/* Layouts: Card Listen Seite                                */
/* ========================================================= */

.sg-card-list-page {
  display: flex;
  flex-direction: column;
}

.sg-card-list-page-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: var(--layout-card-list-drawer-width);
  max-width: 100%;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 220ms ease;
  background: var(--surface-card-list-drawer);
  color: var(--text-card-list-drawer);
  box-shadow: var(--shadow-overlay);
  z-index: 1000;
  overflow-y: auto;
}

.sg-card-list-page-drawer[data-open="true"] {
  transform: translateX(0);
}

.sg-card-list-page-drawer__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-small);
  padding:
    var(--card-segment-padding-vertical)
    var(--layout-page-content-inset-inline);
}

.sg-card-list-page-drawer__title {
  margin: 0;
  color: inherit;
}

.sg-card-list-page-drawer__content {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-large);
  padding:
    var(--card-segment-padding-vertical)
    var(--layout-page-content-inset-inline)
    var(--card-segment-padding-vertical)
    var(--layout-page-content-inset-inline);
}

.sg-card-list-page > * + * {
  margin-top: var(--spacing-large);
}

.sg-card-list-page > .sg-options-row {
  margin-top: var(--layout-options-row-margin-top);
}

.sg-card-list-page__intro-block {
  margin-top: var(--spacing-large);
  margin-bottom: var(--spacing-large);
}

.sg-card-list-page__intro-block .sg-text-layout-pattern__sample--sixty-width {
  width: min(60vw, 100%);
}

@media (max-width: 767px) {
  .sg-card-list-page-drawer {
    display: none;
  }

  .sg-card-list-page__intro-block .sg-text-layout-pattern__sample--sixty-width {
    width: 100%;
  }
}

.sg-card-list-page__object-grid,
.sg-card-list-page__navigation {
  width: 100%;
}

.sg-vsf-drawer-card {
  --surface-card-header-primary: var(--surface-vsf-drawer-object-card-header);
  --surface-card: var(--surface-vsf-drawer-object-card-body);
  --surface-card-body: var(--surface-vsf-drawer-object-card-body);
  --text-card-header: var(--text-vsf-drawer-object-card-heading);
  --text-card-body: var(--text-vsf-drawer-object-card-body);
  width: 100%;
  min-width: 0;
  max-width: none;
  align-self: stretch;
  height: auto;
}

.sg-vsf-drawer-card__content {
  color: var(--text-vsf-drawer-object-card-body);
}

.sg-vsf-drawer-card .sg-text-layout-pattern__two-column,
.sg-vsf-drawer-card .sg-text-layout-pattern__column {
  color: var(--text-vsf-drawer-object-card-body);
}

.sg-vsf-drawer-card .sg-text-layout-pattern__two-column {
  gap: var(--layout-vsf-drawer-object-card-column-gap);
}

.sg-vsf-drawer-card__actions-segment {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--spacing-large);
  background: var(--surface-vsf-drawer-object-card-body);
}

.sg-vsf-drawer-card__actions-segment .sg-interaction-element.sg-button {
  height: auto;
  width: 100%;
}

#vsf-business-model-toggle.sg-interaction-element.sg-button {
  background: var(--surface-portal-header-tab);
  color: var(--text-portal-header-tab);
}

.sg-inline-controls-card {
  --surface-card-body: var(--surface-card-segment-neutral);
}

.sg-card-segment.sg-inline-header-row {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-small);
}

.sg-card-segment.sg-inline-controls-row {
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  gap: var(--spacing-small);
  flex-wrap: nowrap;
}

.sg-vsf-drawer-object-card__heading {
  color: var(--text-vsf-drawer-object-card-heading);
  margin: 0;
}

.sg-analysis-intro-block {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-small);
}

.sg-analysis-intro-block .sg-heading-h2 {
  margin: 0;
}

.sg-analysis-intro-block .sg-text-layout-pattern__sample {
  margin: 0;
  color: var(--text-vsf-drawer-object-card-body);
}

/* ========================================================= */
/* Layouts: Page Layout App                                  */
/* ========================================================= */

.sg-page-layout-app__heading-block {
  margin-top: var(--spacing-large);
  margin-bottom: var(--spacing-large);
}

/* ========================================================= */
/* Layouts: Page Layout Public                               */
/* ========================================================= */

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

main {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.sg-page-layout-public__heading-block {
  margin-top: calc(var(--spacing-large) * 2);
  margin-bottom: var(--spacing-large);
}

.sg-page-layout-public__content-mirror {
  width: min(calc(100% - (var(--spacing-large) * 2)), 1100px);
  max-width: 1100px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.sg-page-layout-public-2-column__columns {
  display: grid;
  grid-template-columns: var(--layout-page-layout-public-2-column-columns);
  gap: var(--layout-page-layout-public-2-column-gap);
  align-items: start;
}

.sg-page-layout-public-2-column__text-column {
  min-width: 0;
}

@media (max-width: 48rem) {
  .sg-page-layout-public__content-mirror {
    width: min(calc(100% - (var(--spacing-small) * 2)), 1100px);
  }

  .sg-page-layout-public-2-column__columns {
    display: flex;
    flex-direction: column;
  }
}

.sg-page-layout-public__footer-card {
  margin-top: auto;
}

/* ========================================================= */
/* Layouts: VSF List Detailseite                             */
/* ========================================================= */

.sg-vsf-list-detail-page {
  display: flex;
  flex-direction: column;
}

.sg-vsf-list-detail-page > * + * {
  margin-top: var(--spacing-large);
}

.sg-vsf-list-detail-page__content {
  display: flex;
  gap: var(--spacing-small);
  width: 100%;
}

.sg-vsf-list-detail-page__mobile-tabs {
  display: none;
}

.sg-vsf-list-detail-page__left-column {
  width: 30%;
  min-width: 30%;
}

.sg-vsf-list-detail-page__right-column {
  width: 70%;
  min-width: 0;
}

.sg-vsf-list-detail-page__left-column .sg-group-card {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.sg-vsf-list-detail-page__left-column .sg-group-card > .sg-card {
  flex: 0 0 100%;
  width: 100%;
}

.sg-vsf-list-detail-page__notification-card.sg-vsf-list-detail-page__notification-card--hidden {
  display: none;
}

.sg-vsf-list-detail-page__meldungen-overlay-pattern {
  max-width: 100%;
}

.sg-vsf-list-detail-page__meldungen-overlay-pattern .sg-delete-confirmation-pattern__floating-card {
  top: calc(var(--spacing-large) * 5);
  transform: translateX(-50%);
}

.sg-vsf-list-detail-page__mobile-toggle {
  display: none;
}

@media (max-width: 767px) {
  .sg-vsf-list-detail-page__mobile-tabs {
    display: flex;
    width: 100%;
    margin-bottom: 0;
  }

  .sg-vsf-list-detail-page__content {
    display: block;
    margin-top: var(--spacing-small);
  }

  .sg-vsf-list-detail-page__left-column {
    width: 100%;
    min-width: 0;
  }

  .sg-vsf-list-detail-page__right-column {
    width: 100%;
  }

  .sg-vsf-list-detail-page__content > [data-vsf-list-detail-panel] {
    width: 100%;
  }

  .sg-vsf-list-detail-page__content > [data-vsf-list-detail-panel][hidden] {
    display: none;
  }

  .sg-vsf-list-detail-page__mobile-toggle {
    display: inline-flex;
    width: 100%;
    margin-bottom: var(--spacing-large);
  }
}

/* ========================================================= */
/* Layouts: VSF Listen Übersicht Seite V2                    */
/* ========================================================= */

.sg-vsf-list-overview-page-v2 {
  display: flex;
  flex-direction: column;
}

.sg-vsf-list-overview-page-v2 > * + * {
  margin-top: var(--spacing-large);
}

.sg-vsf-list-overview-page-v2 .sg-portal-header-pattern-variant {
  margin-bottom: 0;
}

.sg-vsf-list-overview-page-v2 > .sg-vsf-list-overview-page-v2__intro {
  margin-top: var(--spacing-large);
}

.sg-vsf-list-overview-page-v2__content {
  display: flex;
  gap: var(--spacing-small);
  width: 100%;
}

.sg-vsf-list-overview-page-v2__primary {
  width: 70%;
  min-width: 0;
}

.sg-vsf-list-overview-page-v2__secondary {
  width: 30%;
  min-width: 0;
}

.sg-vsf-list-overview-page-v2__intro .sg-text-layout-pattern__sample--sixty-width {
  color: var(--color-font-light);
}

@media (max-width: 767px) {
  .sg-vsf-list-overview-page-v2__content {
    display: block;
  }

  .sg-vsf-list-overview-page-v2__primary,
  .sg-vsf-list-overview-page-v2__secondary {
    width: 100%;
  }

  .sg-vsf-list-overview-page-v2__secondary {
    margin-top: var(--spacing-large);
  }
}

/* ========================================================= */
/* Layouts: VSF Register Step 1                              */
/* ========================================================= */

.sg-vsf-register-step-1 {
  display: block;
  margin-top: clamp(32px, 6vw, 100px);
  padding: 0 var(--layout-page-content-inset-inline);
  box-sizing: border-box;
}

.sg-vsf-register-step-1-page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.sg-vsf-register-step-1__card {
  width: 100%;
  max-width: var(--layout-object-card-max-width);
  margin: 0 auto;
}

.sg-vsf-register-step-1__social-links {
  display: flex;
  justify-content: center;
  gap: var(--spacing-large);
  margin-top: var(--spacing-large);
}

/* ========================================================= */
/* Patterns: Text Layouts                                    */
/* ========================================================= */

.sg-page-text-layouts {
  background: var(--surface-form-preview);
}

.sg-page-text-layouts .sg-main-heading,
.sg-page-text-layouts .sg-preview-label {
  color: inherit;
}

.sg-text-layout-pattern {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-small);
}

.sg-text-layout-pattern__sample {
  margin: 0;
}

.sg-text-layout-pattern__sample--full-width {
  width: 100%;
}

.sg-text-layout-pattern__sample--sixty-width {
  width: 60%;
}

.sg-text-layout-pattern__sample--two-column {
  margin: 0;
}

.sg-text-layout-pattern__two-column {
  width: 100%;
  min-width: 0;
  display: grid;
  grid-template-columns: var(--layout-text-layout-two-column-columns);
  column-gap: var(--layout-text-layout-column-gap);
}

.sg-text-layout-pattern__two-column--stacked-mobile {
  width: 100%;
  min-width: 0;
}

.sg-text-layout-pattern__three-column-distributed {
  width: 100%;
  min-width: 0;
  display: grid;
  grid-template-columns: var(--layout-text-layout-three-column-columns);
  column-gap: var(--layout-text-layout-column-gap);
}

.sg-text-layout-pattern__column {
  margin: 0;
  min-width: 0;
}

.sg-text-layout-pattern__three-column-distributed > .sg-body {
  margin: 0;
}

.sg-text-layout-pattern__column--align-left {
  text-align: var(--text-align-text-layout-column-left);
}

.sg-text-layout-pattern__column--align-center {
  text-align: var(--text-align-text-layout-column-center);
}

.sg-text-layout-pattern__column--align-right {
  text-align: var(--text-align-text-layout-column-right);
}

@media (max-width: 767px) {
  .sg-text-layout-pattern__sample--sixty-width,
  .sg-text-layout-pattern__sample--two-column,
  .sg-text-layout-pattern__two-column,
  .sg-text-layout-pattern__two-column--stacked-mobile,
  .sg-text-layout-pattern__three-column-distributed {
    width: 100%;
  }

  .sg-text-layout-pattern__two-column--stacked-mobile {
    grid-template-columns: 1fr;
    row-gap: var(--layout-text-layout-column-gap);
  }
}

/* ========================================================= */
/* Patterns: Card Gruppe mit Tastennavigation                */
/* ========================================================= */

.sg-content-block-card-group {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-small);
  width: 100%;
}

.sg-content-block-card-group[hidden] {
  display: none;
}

.sg-content-block-card-group__tabs,
.sg-content-block-card-group__panels,
.sg-content-block-card-group__panel,
.sg-content-block-card-group__card {
  width: 100%;
}

.sg-content-block-card-group__panel[hidden] {
  display: none;
}

.sg-content-block-card-group__title {
  color: var(--text-content-block-card-title);
  background: var(--surface-content-block-card-title);
}

.sg-content-block-card-group__content {
  color: var(--text-content-block-card-content);
  background: var(--surface-content-block-card-content);
}

.sg-content-block-card-group__content .sg-body {
  margin: 0;
}

@media (max-width: 767px) {
  .sg-content-block-card-group__tabs[role="tablist"] > [role="tab"] {
    flex: 1 1 auto;
    min-width: max-content;
    white-space: nowrap;
  }
}

/* ========================================================= */
/* Components: Cards                                         */
/* ========================================================= */

.sg-card {
  --layout-card-segment-padding-top: var(--card-segment-padding-vertical);
  --layout-card-segment-padding-right: var(--card-segment-padding-horizontal);
  --layout-card-segment-padding-bottom: var(--card-segment-padding-vertical);
  --layout-card-segment-padding-left: var(--card-segment-padding-horizontal);
  --layout-card-body-padding-top: var(--layout-card-segment-padding-top);
  --layout-card-body-padding-right: var(--layout-card-segment-padding-right);
  --layout-card-body-padding-bottom: var(--layout-card-segment-padding-bottom);
  --layout-card-body-padding-left: var(--layout-card-segment-padding-left);
  --layout-card-body-text-margin: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  width: 100%;
  box-sizing: border-box;
  border: var(--border-none);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-none);
  background: var(--surface-card);
}

.sg-card.sg-card--content-card-dark {
  --surface-card: var(--surface-card-group);
  --surface-card-body: var(--surface-card-group);
  --text-card-body: var(--text-card-header);
}

.sg-card.sg-card--content-card-dark .sg-card-segment--body {
  color: var(--color-font-light);
}

.sg-card.sg-card--content-card-dark .sg-text-layout-pattern__column,
.sg-card.sg-card--content-card-dark .sg-body {
  color: var(--color-font-light);
}

.sg-card.sg-card--footer-card {
  --surface-card: var(--color-black);
  --surface-card-body: var(--color-black);
  margin-top: calc(var(--spacing-large) * 2);
}

.sg-card.sg-card--footer-card .sg-card-segment--body,
.sg-card.sg-card--footer-card .sg-text-layout-pattern__column,
.sg-card.sg-card--footer-card .sg-body {
  color: var(--color-font-light);
}

.sg-card.sg-card--overlay-host {
  overflow: visible;
}

.sg-card > .sg-card-segment:first-child {
  border-top-left-radius: var(--radius-card);
  border-top-right-radius: var(--radius-card);
}

.sg-card > .sg-card-segment:last-child {
  border-bottom-left-radius: var(--radius-card);
  border-bottom-right-radius: var(--radius-card);
}

@media (max-width: 48rem) {
  :root {
    --card-segment-padding-horizontal: var(--card-segment-padding-horizontal-mobile);
  }
}

.sg-card-segment {
  display: flex;
  flex-direction: column;
  height: auto;
  justify-content: flex-start;
  align-items: stretch;
  align-content: flex-start;
  padding:
    var(--layout-card-segment-padding-top)
    var(--layout-card-segment-padding-right)
    var(--layout-card-segment-padding-bottom)
    var(--layout-card-segment-padding-left);
  gap: var(--layout-card-segment-content-gap);
}

.sg-card-segment--header {
  color: var(--text-card-header);
}

.sg-card-segment--body {
  justify-content: var(--layout-card-body-content-justify);
  padding:
    var(--layout-card-body-padding-top)
    var(--layout-card-body-padding-right)
    var(--layout-card-body-padding-bottom)
    var(--layout-card-body-padding-left);
  color: var(--text-card-body);
  background: var(--surface-card-body);
}

.sg-card-segment--body > .sg-body {
  margin: var(--layout-card-body-text-margin, 0);
}

.sg-card-segment--body.sg-object-card__content > .sg-body.sg-company-card__summary {
  margin: var(--layout-company-card-analysis-gap-after-moat) 0 0 0;
}

.sg-card-segment--darkblue {
  background: var(--surface-card-header-primary);
}

.sg-card-segment--darkgreen {
  background: var(--surface-card-header-alternative);
}

.sg-card-segment--darkbrown {
  background: var(--surface-card-header-muted);
}

.sg-card-segment--signal-red {
  background: var(--color-signal-red);
  color: var(--text-card-header);
}

.sg-card-segment--signal-green {
  background: var(--color-signal-green);
  color: var(--text-card-header);
}

.sg-card-segment--signal-green-light {
  background: var(--color-signal-green-light);
  color: var(--text-card-header);
}

.sg-card-segment--signal-yellow {
  background: var(--color-signal-yellow);
  color: var(--text-card-header);
}

.sg-card-segment--gray {
  background: var(--surface-card-segment-neutral);
}

.sg-card-segment--white {
  background: var(--surface-object-card-lower-segment);
}

.sg-card.sg-card--notification-white {
  --text-card-header: var(--text-card-body);
}

.sg-card.sg-card--notification-signal-green-light {
  --text-card-header: var(--color-font-light);
  --text-card-body: var(--color-font-light);
}

.sg-card--content-card {
  --surface-card-header-primary: var(--surface-content-block-card-title);
  --surface-card-body: var(--surface-content-block-card-content);
  --text-card-header: var(--text-content-block-card-title);
  --text-card-body: var(--text-content-block-card-content);
}

.sg-card-segment + .sg-card-segment {
  box-shadow: inset 0 1px 0 var(--divider-card-segment);
}

.sg-card-segment--darkbrown + .sg-card-segment--body {
  box-shadow: none;
}

.sg-card-segment.sg-object-card__header {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}

.sg-card-segment--body.sg-object-card__content {
  background: var(--surface-object-card-lower-segment);
}

.sg-card-segment--body.sg-object-card__actions-segment {
  background: var(--surface-object-card-lower-segment);
}

.sg-card-segment.sg-vsf-drawer-card__actions-segment {
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-large);
}

.sg-group-card {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-small);
  align-items: flex-start;
  width: 100%;
  box-sizing: border-box;
  padding: var(--spacing-small);
  border-radius: var(--radius-card);
  background: var(--surface-card-group);
}

.sg-group-card > .sg-card {
  flex: 1 1 calc(50% - var(--spacing-small));
  width: calc(50% - var(--spacing-small));
}

.sg-group-card--margin-after-large {
  margin-bottom: var(--spacing-large);
}

.sg-group-card__header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-small);
  width: 100%;
  margin-bottom: var(--spacing-small);
}

.sg-group-card__heading {
  flex: 0 0 100%;
  margin-top: 0;
  margin-right: 0;
  margin-bottom: var(--spacing-small);
  margin-left: var(--card-segment-padding-horizontal);
}

.sg-group-card__header-row .sg-group-card__heading {
  flex: 1 1 auto;
  margin-top: 0;
  margin-right: 0;
  margin-bottom: 0;
  margin-left: var(--card-segment-padding-horizontal);
}

.sg-group-card__header-row .sg-sandwich-menu-wrap {
  margin-right: var(--card-segment-padding-horizontal);
}

.sg-page-cards .sg-preview-area {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.sg-page-cards .sg-preview-area > .sg-card,
.sg-page-cards .sg-preview-area > .sg-transparent-card {
  width: 100%;
  max-width: none;
}

.sg-page-cards .sg-group-card > .sg-card {
  flex: 0 0 100%;
  width: 100%;
}

.sg-transparent-card {
  color: var(--text-card-transparent);
  background: var(--surface-card-transparent);
  padding:
    0
    var(--card-segment-padding-horizontal)
    0
    var(--card-segment-padding-horizontal);
}

.sg-transparent-card p {
  margin: 0;
  color: var(--text-card-transparent);
}

/* ========================================================= */
/* Components: Charts                                        */
/* ========================================================= */

.sg-score-bar-list {
  display: grid;
  grid-template-columns: var(--layout-score-bar-item-columns);
  column-gap: var(--layout-score-bar-item-gap);
  row-gap: var(--spacing-small);
  align-items: center;
  width: 100%;
}

.sg-score-bar-item {
  display: contents;
}

.sg-score-bar-list--single-score {
  --layout-score-bar-item-columns: var(--layout-score-bar-item-single-score-columns);
}

.sg-score-state--positive,
.sg-score-state--warning,
.sg-score-state--neutral,
.sg-score-state--negative {
  margin: 0;
  justify-self: end;
  text-align: right;
}

.sg-score-state--positive {
  color: var(--text-score-state-positive);
}

.sg-score-state--warning {
  color: var(--text-score-state-warning);
}

.sg-score-state--neutral {
  color: var(--text-score-state-neutral);
}

.sg-score-state--negative {
  color: var(--text-score-state-negative);
}

.sg-score-bar-label {
  margin: 0;
  color: var(--text-chart-default);
}

.sg-score-bar {
  position: relative;
  height: var(--score-bar-height);
  overflow: visible;
  border-radius: var(--radius-graph-bar);
  background: var(--surface-score-bar-track);
}

.sg-score-bar--marker-mid {
  --score-marker-position: 50%;
}

.sg-score-bar--no-value {
  display: block;
}

.sg-score-bar__value {
  height: 100%;
  border-radius: var(--radius-graph-bar);
}

.sg-score-bar__value--w96 { width: 96%; }
.sg-score-bar__value--w64 { width: 64%; }
.sg-score-bar__value--w35 { width: 35%; }

.sg-score-bar__value--positive { background: var(--chart-value-positive); }
.sg-score-bar__value--neutral { background: var(--chart-value-neutral); }
.sg-score-bar__value--negative { background: var(--chart-value-negative); }

.sg-score-bar__median-marker {
  position: absolute;
  top: 50%;
  left: var(--score-marker-position);
  width: var(--score-marker-width);
  height: var(--score-marker-height);
  border-radius: 0;
  background: var(--chart-marker-line);
  transform: translate(-50%, -50%);
}

.sg-score-bar__median-marker--outline {
  border: var(--chart-grid-line-width) solid var(--chart-marker-line);
  background: transparent;
}

.sg-score-bar__empty-state {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding-inline-start: var(--spacing-small);
  color: var(--text-chart-default);
  font-family: var(--font-family-base);
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-base);
  pointer-events: none;
}

.sg-chart-preview-area {
  min-width: var(--layout-object-card-min-width);
  max-width: var(--layout-object-card-max-width);
  width: 100%;
}

.sg-bar-chart {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 0;
  background: var(--surface-chart-area);
  color: var(--text-chart-default);
}

.sg-chart-frame {
  display: grid;
  grid-template-columns: min-content 1fr;
  column-gap: var(--chart-axis-label-gap);
  height: calc(var(--chart-height-bar) * 0.7);
}

.sg-chart-y-labels {
  position: relative;
  width: min-content;
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--text-chart-default);
  text-align: right;
  pointer-events: none;
}

.sg-chart-y-labels li {
  position: absolute;
  white-space: nowrap;
  right: 0;
  top: var(--chart-label-position);
  transform: translateY(-50%);
}

.sg-chart-x-labels {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  margin: var(--spacing-small) 0 var(--spacing-large) 0;
  padding: 0 0 0 calc(var(--interaction-height) + var(--chart-axis-label-gap));
  list-style: none;
  color: var(--text-chart-default);
  text-align: center;
}

.sg-chart-x-labels--line {
  position: relative;
  display: block;
  height: var(--spacing-large);
  grid-template-columns: none;
}

.sg-chart-x-labels--line li {
  position: absolute;
  left: var(--chart-label-position);
  transform: translateX(-50%);
}

.sg-chart-y-labels li,
.sg-chart-x-labels li {
  font-family: var(--font-family-base);
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-base);
}

.sg-bar-chart__svg,
.sg-line-chart__svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.sg-bar-chart__grid-line,
.sg-line-chart__grid-line {
  stroke: var(--chart-grid-line);
  stroke-width: var(--chart-grid-line-width);
}

.sg-bar-chart__axis-line,
.sg-line-chart__axis-line {
  stroke: var(--chart-axis-line);
  stroke-width: var(--chart-grid-line-width);
}

.sg-bar-chart__bar {
  rx: var(--radius-graph-bar);
  ry: var(--radius-graph-bar);
}

.sg-bar-chart__bar--value { fill: var(--chart-value-primary); }
.sg-bar-chart__bar--median { fill: var(--chart-value-reference); }
.sg-bar-chart__label,
.sg-line-chart__label { display: none; }

.sg-bar-chart__legend,
.sg-line-chart__legend {
  display: flex;
  gap: var(--spacing-large);
  padding-left: 0;
  margin-left: 0;
}

.sg-bar-chart__legend {
  flex-wrap: wrap;
  margin-top: 0;
  color: var(--text-chart-default);
}

.sg-line-chart__legend {
  margin-top: var(--spacing-large);
}

.sg-bar-chart__legend-item,
.sg-line-chart__legend-item {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-small);
  color: var(--text-chart-default);
  font-family: var(--font-family-base);
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-base);
}

.sg-bar-chart__legend-swatch {
  display: inline-block;
  width: var(--interaction-height);
  height: var(--interaction-height);
  border-radius: var(--radius-interaction);
}

.sg-bar-chart__legend-swatch--value { background: var(--chart-value-primary); }
.sg-bar-chart__legend-swatch--median { background: var(--chart-value-reference); }

.sg-line-chart {
  width: 100%;
  box-sizing: border-box;
  padding: 0;
  background: var(--surface-chart-area);
  color: var(--text-chart-default);
}

.sg-chart-frame--line {
  height: calc(var(--chart-height-line) * 0.7);
}

.sg-line-chart__line {
  fill: none;
  stroke: var(--chart-value-primary);
  stroke-width: var(--chart-line-width);
  stroke-linecap: round;
  stroke-linejoin: round;
}

.sg-line-chart__median-line {
  fill: none;
  stroke: var(--chart-median-line);
  stroke-width: var(--chart-grid-line-width);
  stroke-dasharray: var(--sandwich-line-height) var(--sandwich-line-height);
}

.sg-line-chart__legend-line {
  display: inline-block;
  width: var(--spacing-large);
  height: var(--chart-line-width);
  background: var(--chart-value-primary);
}

.sg-line-chart__legend-line--median {
  height: var(--chart-grid-line-width);
  background: repeating-linear-gradient(
    to right,
    var(--chart-median-line) 0,
    var(--chart-median-line) var(--sandwich-line-height),
    transparent var(--sandwich-line-height),
    transparent calc(var(--sandwich-line-height) * 2)
  );
}

/* ========================================================= */
/* Components: Data Display                                  */
/* ========================================================= */

.sg-data-table {
  --data-table-column-count: 3;
  width: 100%;
  border-collapse: collapse;
  background: var(--surface-data-table);
  table-layout: fixed;
}

.sg-data-table th,
.sg-data-table td {
  width: calc(100% / var(--data-table-column-count));
  padding: 0 0 var(--spacing-small) 0;
  border: var(--border-none);
  text-align: left;
  vertical-align: top;
}

.sg-data-table[data-component="data-columns"] {
  --data-table-column-count: 2;
}

.sg-data-table th {
  font-family: var(--font-family-base);
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-base);
  color: var(--text-data-table-default);
  background: var(--surface-data-table-header);
}

.sg-data-table td {
  font-family: var(--font-family-base);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-base);
  color: var(--text-data-table-default);
  background: var(--surface-data-table-cell);
}

.sg-data-table__label,
.sg-data-table__value {
  font-weight: var(--font-weight-semibold);
}

.sg-data-table__value--warning {
  color: var(--text-data-table-warning);
}

.sg-data-table__help-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--small-interaction-element-size);
  height: var(--small-interaction-element-size);
  border: var(--border-none);
  border-radius: 50%;
  box-shadow: var(--shadow-none);
  font-family: var(--font-family-base);
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-semibold);
  line-height: 1;
  color: var(--text-data-table-help-icon);
  background: var(--surface-data-table-help-icon);
}

.sg-large-table {
  width: 100%;
}

.sg-large-table__title-segment {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-large);
}

.sg-large-table__row {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  align-items: stretch;
  gap: 0;
  width: 100%;
  box-sizing: border-box;
  background: var(--color-white);
}

.sg-large-table__row--hidden {
  display: none;
}

.sg-large-table__row--header {
  font-weight: var(--font-weight-semibold);
  background: var(--color-medium-grey);
}

.sg-large-table__row--striped-light {
  background: var(--color-light-grey);
}

.sg-large-table__row--load-more {
  background: var(--color-medium-grey);
}

.sg-large-table__cell {
  min-width: 0;
  padding: 0 var(--spacing-small);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sg-large-table__cell--load-more {
  grid-column: 1 / -1;
  padding: 0;
  white-space: normal;
}

.sg-large-table__load-more-layout {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.sg-large-table__cell--header {
  padding: 0;
}

.sg-large-table__sort-button {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.2rem;
  width: 100%;
  padding: 0 var(--spacing-small);
  border: var(--border-none);
  background: var(--color-transparent);
  color: inherit;
  font: inherit;
  font-weight: var(--font-weight-semibold);
  text-align: left;
  cursor: pointer;
}

.sg-large-table__sort-button:focus-visible {
  outline: 2px solid var(--color-darkblue);
  outline-offset: -2px;
}

.sg-large-table__sort-icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 0.85rem;
  height: 0.85rem;
  line-height: 1;
  transform: translateY(0.02em);
}

.sg-large-table__sort-icon::before {
  content: "";
  display: block;
  width: 0;
  height: 0;
  border-left: 0.36rem solid transparent;
  border-right: 0.36rem solid transparent;
  border-bottom: 0.55rem solid currentColor;
}

.sg-large-table__sort-icon[data-direction="descending"]::before {
  transform: rotate(180deg);
}

/* ========================================================= */
/* Components: Typography                                    */
/* ========================================================= */

.sg-typography-preview {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-small);
  color: var(--text-typography-preview);
}

.sg-typography-preview h1,
.sg-typography-preview h2,
.sg-typography-preview p {
  color: var(--text-typography-preview);
  margin-top: 0;
}

.sg-bullet-list {
  margin: 0;
  padding-inline-start: calc(var(--spacing-large) * 2.5);
  list-style-position: outside;
  color: var(--text-typography-preview);
  font-family: var(--font-family-base);
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
}

.sg-bullet-list li + li {
  margin-top: var(--spacing-small);
}

/* ========================================================= */
/* Components: Public Page Components                        */
/* ========================================================= */

.sg-content-group-box {
  --surface-content-group-box: var(--color-transparent);
  --layout-content-group-box-gap: var(--spacing-large);
  --layout-content-group-box-margin-block: var(--spacing-large);
  display: flex;
  flex-direction: column;
  width: 100%;
  box-sizing: border-box;
  margin: var(--layout-content-group-box-margin-block) 0;
  background: var(--surface-content-group-box);
  gap: var(--layout-content-group-box-gap);
}

.sg-content-group-box > * {
  margin: 0;
}

.sg-text-block {
  --surface-text-block: var(--color-transparent);
  --text-text-block: var(--color-font-light);
  --layout-text-block-width: var(--dimension-public-content-width);
  width: var(--layout-text-block-width);
  box-sizing: border-box;
  background: var(--surface-text-block);
  color: var(--text-text-block);
}

.sg-text-block--align-right {
  margin-left: auto;
}

.sg-text-block .sg-body {
  margin: 0;
  color: var(--text-text-block);
}

.sg-card--call-to-action-card {
  --surface-call-to-action-card: var(--surface-card-group);
  --text-call-to-action-card: var(--color-font-light);
  --layout-call-to-action-card-width: calc(var(--dimension-public-content-width) * 0.5);
  --layout-call-to-action-card-content-columns: minmax(0, 1fr) max-content;
  --layout-call-to-action-card-content-gap: var(--spacing-large);
  width: var(--layout-call-to-action-card-width);
  max-width: 100%;
}

.sg-card--call-to-action-card .sg-card-segment--body {
  display: grid;
  grid-template-columns: var(--layout-call-to-action-card-content-columns);
  gap: var(--layout-call-to-action-card-content-gap);
  align-items: center;
  background: var(--surface-call-to-action-card);
  color: var(--text-call-to-action-card);
}

.sg-call-to-action-card__text {
  margin: 0;
  min-width: 0;
  color: var(--text-call-to-action-card);
}

.sg-call-to-action-card__action {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.sg-call-to-action-card--align-right {
  margin-left: auto;
}

.sg-picture-full-width {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-picture-full-width);
}

.sg-page-public-page-components .sg-preview-area {
  display: flex;
  flex-direction: column;
  width: 100%;
}

@media (max-width: 48rem) {
  .sg-text-block,
  .sg-card--call-to-action-card {
    width: 100%;
  }
}

/* ========================================================= */
/* Patterns: Public Page Patterns                            */
/* ========================================================= */

.sg-page-public-page-patterns .sg-preview-area {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.sg-public-page-pattern-call-to-action-box {
  width: var(--layout-public-page-pattern-call-to-action-box-width);
  max-width: 100%;
  margin-inline: auto;
}

.sg-public-page-pattern-call-to-action-box--light {
  background: var(--surface-public-page-pattern-call-to-action-box-light);
  color: var(--color-font-dark);
}

.sg-public-page-pattern-call-to-action-box--light .sg-card-segment--body {
  background: var(--surface-public-page-pattern-call-to-action-box-light);
  color: var(--color-font-dark);
}

.sg-public-page-pattern-call-to-action-box--light .sg-bullet-list {
  color: var(--color-font-dark);
}

.sg-public-page-pattern-call-to-action-box__action {
  display: flex;
}

.sg-public-page-pattern-call-to-action-box__action .sg-button--cta {
  width: 100%;
}

.sg-public-page-pattern-text-and-picture-right {
  --layout-public-page-pattern-text-picture-columns: repeat(2, minmax(0, 1fr));
  --layout-public-page-pattern-text-picture-gap: var(--spacing-large);
  --text-public-page-pattern-text-picture: var(--color-font-light);
  display: grid;
  width: 100%;
  min-width: 0;
  grid-template-columns: var(--layout-public-page-pattern-text-picture-columns);
  grid-template-areas:
    "heading heading"
    "text picture";
  gap: var(--layout-public-page-pattern-text-picture-gap);
  align-items: start;
  color: var(--text-public-page-pattern-text-picture);
}

.sg-public-page-pattern-text-and-picture-fullwidth {
  --text-public-page-pattern-text-picture: var(--color-font-light);
  display: flex;
  flex-direction: column;
  width: 100%;
  min-width: 0;
  gap: var(--spacing-large);
  color: var(--text-public-page-pattern-text-picture);
}

.sg-public-page-pattern-text-and-picture-left {
  --layout-public-page-pattern-text-picture-columns: repeat(2, minmax(0, 1fr));
  --layout-public-page-pattern-text-picture-gap: var(--spacing-large);
  --text-public-page-pattern-text-picture: var(--color-font-light);
  display: grid;
  width: 100%;
  min-width: 0;
  grid-template-columns: var(--layout-public-page-pattern-text-picture-columns);
  grid-template-areas:
    "heading heading"
    "picture text";
  gap: var(--layout-public-page-pattern-text-picture-gap);
  align-items: start;
  color: var(--text-public-page-pattern-text-picture);
}

.sg-public-page-pattern-text-and-picture-right > .sg-heading-h2 {
  grid-area: heading;
  margin: 0;
  color: var(--text-public-page-pattern-text-picture);
}

.sg-public-page-pattern-text-and-picture-fullwidth > .sg-heading-h2 {
  margin: 0;
  color: var(--text-public-page-pattern-text-picture);
}

.sg-public-page-pattern-text-and-picture-left > .sg-heading-h2 {
  grid-area: heading;
  margin: 0;
  color: var(--text-public-page-pattern-text-picture);
}

.sg-public-page-pattern-text-and-picture-right__text {
  grid-area: text;
  min-width: 0;
}

.sg-public-page-pattern-text-and-picture-fullwidth__text {
  min-width: 0;
}

.sg-public-page-pattern-text-and-picture-fullwidth > .sg-picture-full-width {
  width: 100%;
  margin-inline: auto;
  min-width: 0;
}

.sg-public-page-pattern-text-and-picture-left__text {
  grid-area: text;
  min-width: 0;
}

.sg-public-page-pattern-text-and-picture-right > .sg-picture-full-width {
  grid-area: picture;
  min-width: 0;
}

.sg-public-page-pattern-text-and-picture-left > .sg-picture-full-width {
  grid-area: picture;
  min-width: 0;
}

.sg-public-page-pattern-text-and-picture-right__text .sg-body {
  margin: 0;
  color: var(--text-public-page-pattern-text-picture);
}

.sg-public-page-pattern-text-and-picture-fullwidth__text .sg-body {
  margin: 0;
  color: var(--text-public-page-pattern-text-picture);
}

.sg-public-page-pattern-text-and-picture-left__text .sg-body {
  margin: 0;
  color: var(--text-public-page-pattern-text-picture);
}

@media (max-width: 48rem) {
  .sg-public-page-pattern-text-and-picture-right {
    grid-template-columns: 1fr;
    grid-template-areas:
      "heading"
      "picture"
      "text";
  }

  .sg-public-page-pattern-text-and-picture-left {
    grid-template-columns: 1fr;
    grid-template-areas:
      "heading"
      "picture"
      "text";
  }

  .sg-public-page-pattern-text-and-picture-fullwidth > .sg-picture-full-width {
    width: 100%;
  }

  .sg-public-page-pattern-call-to-action-box {
    width: 100%;
  }
}



/* =========================================================
   LEGACY STYLES
   To be migrated step by step to styleguide system.
   Do not extend unless explicitly approved.
   ========================================================= */



/* Global UI tokens and patterns are documented in docs/ui-stylebook.md. */
:root {
    --font-family-base: "Open Sans", system-ui, sans-serif;
    --radius: 7px;
    --box-radius: var(--radius);
    --color-white: #ffffff;
    --text-color: #5f6673;
    --ink: var(--text-color);
    --muted: var(--text-color);
    --line: #c9c9c9;
    --chart-grid-line: #cccdcf;
    --chart-axis-ink: var(--detail-table-head-ink);
    --accent: #5971b1;
    --accent-dark: #4c63a3;
    --positive: #009100;
    --negative: #9b3b2f;
    --ampel-positive: var(--positive);
    --ampel-warning: #9c7a00;
    --ampel-negative: var(--negative);
    --ampel-neutral: var(--ink);
    --scorebar-track: rgba(0, 0, 0, 0.12);
    --scorebar-radius: 2px;
    --box-stack-gap: 8px;
    --surface-gray: #e7e9ec;
    --box-header-gray: var(--surface-gray);
    --box-surface: var(--surface-gray);
    --box-outline: transparent;
    --box-shadow: none;
    --segment-box-border-radius: var(--box-radius);
    --segment-box-padding-horizontal: 16px;
    --segment-box-padding-vertical: 8px;
    --segment-box-margin-horizontal: 0;
    --segment-box-margin-vertical: 0;
    --standard-segment-box-colour: var(--box-surface);
    --content-box-border-radius: var(--segment-box-border-radius);
    --content-box-padding-horizontal: var(--segment-box-padding-horizontal);
    --content-box-padding-vertical: var(--segment-box-padding-vertical);
    --content-box-margin-horizontal: var(--segment-box-margin-horizontal);
    --content-box-margin-vertical: var(--segment-box-margin-vertical);
    --standard-content-box-header-colour: var(--panel-blue-emphasis);
    --standard-content-box-color: var(--panel-light);
    --peergroup-content-box-color: var(--peer-context-surface);
    --standard-content-box-light-colour: var(--color-white);
    --table-body: var(--surface-gray);
    --panel-emphasis: var(--surface-gray);
    --panel-light: var(--surface-gray);
    --panel-blue-emphasis: var(--accent);
    --panel-blue-light: #cfd6e6;
    --filter-bg: var(--surface-gray);
    --metrics-segment-bg: var(--box-header-gray);
    --btn-border: var(--accent-dark);
    --btn-text: var(--text-color);
    --btn-bg: transparent;
    --btn-border-on-dark: var(--color-white);
    --btn-text-on-dark: var(--color-white);
    --chip: #c16238;
    --chip-light: var(--surface-gray);
    --chip-light-orange: #e39674;
    --metrics-slider-gray-90: rgba(128, 128, 128, 0.9);
    --metrics-slider-disabled-gray-50: rgba(128, 128, 128, 0.5);
    --metrics-slider-thumb-fill: var(--color-white);
    --metrics-slider-thumb-border: var(--metrics-slider-gray-90);
    --filter-panel-shadow: 0 0 14px rgba(0, 0, 0, 0.2), 0 10px 24px rgba(0, 0, 0, 0.2);
    --table-accent: #9eadd6;
    --topic-box-bg: var(--surface-gray);
    --topic-box-border: var(--color-white);
    --topic-box-divider: var(--color-white);
    --peer-context-gray-80: #C4CBD9;
    --peer-context-surface: var(--peer-context-gray-80);
    --peer-context-surface-strong: var(--peer-context-gray-80);
    --peer-context-header: #596274;
    --peer-context-ink: var(--text-color);
    --peer-context-muted: var(--text-color);
    --peer-context-bar: var(--peer-context-gray-80);
    --peer-context-pill: var(--peer-context-gray-80);
    --peer-context-pill-ink: var(--text-color);
    --peer-context-relative-median: #414959;
    --peer-context-relative-median-width: 5px;
    --peer-context-marker-core: var(--peer-context-relative-median);
    --peer-context-marker-width: var(--peer-context-relative-median-width);
    --peer-context-marker-safe-offset: calc(var(--peer-context-marker-width) / 2);
    --peer-context-marker-outline: transparent;
    --info-tip-gray-80: var(--text-color);
    --info-tip-gap: 6px;
    --font-size-text: 1rem;
    --font-size-k1: var(--font-size-text);
    --font-size-k2: var(--font-size-text);
    --font-size-k3: var(--font-size-text);
    --font-size-h3: var(--font-size-text);
    --font-size-kennzahl: var(--font-size-text);
    --font-size-kennzahl-table-head: calc(var(--font-size-text) * 0.8);
    --detail-table-head-ink: #5f6673;
    --line-height-text: 1.5;
    --line-height-heading: 1.25;
    --font-weight-kennzahl: 600;
    --control-height: 34px;
    --control-padding-filter-button: 4px 34px 4px 10px;
    --control-padding-filter-input: 4px 10px;
    --control-padding-filter-input-with-clear: 4px 34px 4px 10px;
    --control-padding-filter-panel-input: 6px 8px;
    --btn-height: 36px;
    --btn-border-width: 1px;
    --btn-icon-size: 36px;
    --btn-height-compact: 28px;
    --button-padding-vertical: 10px;
    --button-padding-vertical-compact: 4px;
    --button-padding-ratio-horizontal: 1.2;
    --button-padding-horizontal: calc(var(--button-padding-vertical) * var(--button-padding-ratio-horizontal));
    --button-gap-horizontal: 10px;
    --button-flow-direction: row-reverse;
    --standard-button-font-face: 600;
    --interactive-element-margin-block: 0;
    --interactive-group-gap: 10px;
    --interactive-active-bg: var(--color-white);
    --interactive-active-border: var(--muted);
    --interactive-active-text: var(--ink);
    --interactive-inactive-bg: var(--surface-gray);
    --interactive-inactive-border: var(--line);
    --interactive-inactive-text: var(--metrics-slider-disabled-gray-50);
    --child-box-radius: 4px;
    --child-box-shadow: none;
    --child-box-border: transparent;
    --child-box-gap: 12px;
}

* {
    box-sizing: border-box;
}

html {
    text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
}


h1,
h2,
h3 {
    margin: 0 0 8px;
    line-height: var(--line-height-heading);
    font-weight: 600;
}

h1 {
    font-size: var(--font-size-h1);
}

h2 {
    font-size: var(--font-size-h2);
}

h3 {
    font-size: var(--font-size-h3);
    line-height: var(--line-height-text);
}

.kennzahl {
    --kennzahl-font-weight: var(--font-weight-kennzahl);
}

.kennzahl-label,
.kennzahl-value {
    font-size: var(--font-size-kennzahl);
    font-weight: var(--font-weight-kennzahl);
}

.kennzahl h3,
.kennzahl .detail-value,
.kennzahl .kennzahl-label,
.kennzahl .kennzahl-value {
    font-size: var(--font-size-kennzahl);
    font-weight: var(--kennzahl-font-weight);
}

.kennzahl .kennzahl-value .diff,
.kennzahl-value .diff {
    font-weight: inherit;
}

p,
li,
th,
td,
label,
button,
input,
select,
textarea {
    font-family: inherit;
    font-size: var(--font-size-text);
    line-height: var(--line-height-text);
}

body.drawer-open {
    overflow: hidden;
}

.page {
    max-width: 100%;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0;
    width: 100%;
    overflow-x: hidden;
}

.mobile-menu-wrap {
    display: none;
    position: relative;
}

.prices-page .prices-page__focus-card {
    margin-top: var(--spacing-large);
}

.prices-page .sg-public-page-pattern-call-to-action-box--light .prices-page__focus-card,
.prices-page .sg-public-page-pattern-call-to-action-box--light .prices-page__focus-card .sg-card-segment--body {
    background: var(--surface-card-group);
}

.prices-page .prices-page__faq .sg-body {
    margin-bottom: var(--spacing-large);
}

.prices-page .prices-page__faq .sg-body:last-child {
    margin-bottom: 0;
}

.btn--hamburger {
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    gap: 4px;
    border-color: transparent;
}

.btn--hamburger.btn--on-dark {
    border-color: transparent;
    background: transparent;
}

.btn--hamburger span {
    display: block;
    width: 20px;
    height: 2px;
    border-radius: 999px;
    background: currentColor;
}

.btn--hamburger span + span {
    margin-top: 0;
}

.mobile-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 170px;
    background: var(--surface-gray);
    border-radius: var(--radius);
    border: 1px solid var(--line);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.16);
    display: none;
    z-index: 10;
}

.mobile-menu.is-open {
    display: block;
}

.mobile-menu-link {
    display: block;
    padding: 10px 12px;
    color: var(--ink);
    font-weight: 600;
    text-decoration: none;
}

.login-page {
    background: radial-gradient(circle at top left, #edf2ff 0%, #f8f9fc 60%, var(--color-white) 100%);
}

.login-shell {
    flex: 1;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.login-card {
    width: min(560px, 100%);
    border: 1px solid #d6ddeb;
    border-radius: var(--radius);
    padding: 28px;
    background: var(--color-white);
    box-shadow: 0 12px 34px rgba(34, 57, 110, 0.10);
}

.login-kicker {
    margin: 0 0 10px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--accent-dark);
    font-weight: 700;
}

.login-card h1 {
    margin: 0 0 12px;
    color: var(--ink);
}

.login-card p {
    margin: 0 0 18px;
    color: var(--ink);
}

.registration-confirmed-shell {
    flex: 1;
    min-height: 0;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 100px 24px 24px;
}

.registration-confirmed-card {
    width: min(var(--layout-object-card-max-width), 100%);
    margin: 0 auto;
}

.terms-page .sg-text-layout-pattern,
.terms-page .sg-text-layout-pattern * {
    color: var(--color-white);
}

.terms-page .sg-text-layout-pattern a {
    color: var(--color-white);
}

.terms-page .sg-text-layout-pattern a:hover,
.terms-page .sg-text-layout-pattern a:focus {
    color: var(--color-white);
}

.login-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--interactive-group-gap);
}

body.consent-page {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.consent-page__shell {
    flex: 1;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 24px;
}

.consent-page__card {
    width: min(560px, 100%);
    margin: 0 auto;
    flex: 0 0 auto;
    height: auto;
    min-height: 0;
}

.consent-page__card.sg-object-card-content-basic {
    margin-top: 0;
}

.consent-page__card .sg-object-card__content {
    flex: 0 0 auto;
}

.consent-page__form-segment {
    display: flex;
}

.consent-page__button-segment {
    display: flex;
    justify-content: flex-end;
}

.consent-page__actions {
    display: flex;
    justify-content: flex-end;
    width: 100%;
}

.consent-page__error {
    color: var(--color-status-error, var(--color-font-dark));
}

@media (max-width: 767px) {
    .registration-confirmed-shell {
        padding: 50px 16px 16px;
    }

    .consent-page__shell {
        padding: 16px;
    }
}

.filters {
    display: block;
    --filters-surface-bg: var(--filter-bg);
    background: var(--filters-surface-bg);
    padding: 12px 20px;
    border-bottom: 1px solid var(--line);
    width: 100%;
    position: relative;
    z-index: 6;
}

#section-panel-lists [data-pattern="options-row-left-only"],
#section-panel-updates [data-pattern="options-row-left-only"] {
    margin: 0 0 var(--spacing-large) 0;
    width: 100%;
}

#section-panel-updates > section > .sg-options-row {
    margin-top: var(--spacing-small);
}

#messages-group-kaufsignale-sort,
#messages-mobile-kaufsignale-sort {
    flex: 0 0 100%;
    width: 100%;
}

.section-content--placeholder {
    padding: 8px 12px 12px;
}

.list-pagination-row {
    width: 100%;
    padding: 0 8px 8px;
    display: flex;
    justify-content: center;
}

.list-pagination-row[hidden] {
    display: none;
}

.list-pagination-row .btn {
    width: 100%;
    min-height: calc(var(--btn-height) * 2);
    color: var(--color-white);
    justify-content: center;
    background: var(--panel-blue-emphasis);
    border-color: var(--panel-blue-emphasis);
}

#peer-groups-overview-view[hidden],
#peer-groups-detail-view[hidden] {
    display: none !important;
}

#peer-groups-hidden-notice-card {
    overflow: visible;
}

#peer-group-detail-description {
    white-space: pre-line;
}

.section-placeholder-note {
    color: var(--muted);
}

.section-filters--placeholder .filters-body {
    min-height: var(--control-height);
    align-items: center;
}

.filters.peer-compare-active {
    --filters-surface-bg: var(--filter-bg);
}

.peer-groups-filters {
    --filters-surface-bg: var(--peer-context-surface);
}

.peer-groups-filters .filter-button {
    background: var(--peer-context-surface);
    border-color: var(--muted);
}

.peer-groups-filters .filter-control.is-active .filter-button {
    background: var(--color-white);
}

.peer-groups-filters .filter-panel {
    background: var(--peer-context-surface);
}

.list-pagination-row--peer {
    background: var(--peer-context-surface);
}

.peer-group-detail-mobile-back {
    display: none;
}

.peer-group-detail-mobile-back-link {
    appearance: none;
    border: 0;
    background: transparent;
    padding: 0;
    cursor: pointer;
}

.peer-group-detail-mobile-back--bottom {
    margin-top: 8px;
}

.filters-body {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: var(--interactive-group-gap);
}

.info-tip-inline-group {
    display: inline-flex;
    align-items: center;
    gap: var(--info-tip-gap);
}

.info-tip-inline-group > .info-tip {
    margin-inline-start: 0;
    flex: 0 0 auto;
}

.peer-compare-toggle,
.evaluation-mode-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
    white-space: nowrap;
}

.peer-compare-label-wrap,
.evaluation-mode-label-wrap {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.peer-compare-label,
.evaluation-mode-label {
    color: var(--ink);
}

.evaluation-mode-option {
    color: var(--ink);
}

.peer-switch {
    position: relative;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
}

.peer-switch input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.peer-switch-track {
    position: relative;
    display: inline-flex;
    align-items: center;
    width: 68px;
    height: 36px;
    padding: 3px;
    border: 2px solid var(--peer-context-pill-ink);
    border-radius: 999px;
    background: transparent;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.peer-switch-thumb {
    display: block;
    width: 24px;
    height: 24px;
    border-radius: 999px;
    background: var(--peer-context-pill-ink);
    transform: translateX(0);
    transition: transform 0.15s ease;
}

.peer-switch input:checked + .peer-switch-track {
    background: rgba(89, 89, 91, 0.08);
}

.peer-switch input:checked + .peer-switch-track .peer-switch-thumb {
    transform: translateX(32px);
}

.peer-switch input:focus-visible + .peer-switch-track {
    outline: 2px solid var(--accent-dark);
    outline-offset: 2px;
}

.peer-switch input:disabled + .peer-switch-track {
    cursor: not-allowed;
    border-color: var(--metrics-slider-disabled-gray-50);
    background: transparent;
    opacity: 0.7;
}

.peer-switch input:disabled + .peer-switch-track .peer-switch-thumb {
    background: var(--metrics-slider-disabled-gray-50);
}

.evaluation-mode-toggle.is-disabled {
    opacity: 0.72;
}

.detail-local-controls-box {
    margin-top: 8px;
}

.detail-local-controls {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
}

.detail-local-evaluation-mode {
    margin-left: 0;
    order: 1;
    width: auto;
    grid-column: auto;
    justify-content: flex-start;
    gap: 4px;
    margin-bottom: 0;
    padding: 0;
    background: transparent;
    border-bottom: 0;
}

.detail-local-menu-wrap {
    order: 2;
    margin-left: auto;
}

.detail-local-card-menu {
    right: 0;
    left: auto;
}

.detail-local-menu-wrap .rating-card-menu-toggle,
.detail-local-menu-wrap .rating-card-menu-toggle.btn--on-dark {
    border-color: var(--btn-border);
}

.detail-local-menu-wrap .rating-card-menu-toggle span {
    background: var(--btn-border);
}

.filter-control {
    position: relative;
    flex: 0 0 auto;
    min-width: 0;
    z-index: 1;
}

.filter-control.is-open {
    z-index: 20;
}

.filter-control--search {
    width: auto;
    min-width: 138px;
}

.filter-button {
    appearance: none;
    border: 1px solid var(--line);
    background: var(--surface-gray);
    border-radius: var(--radius);
    min-height: var(--control-height);
    padding: var(--control-padding-filter-button);
    font-family: inherit;
    color: var(--ink);
    min-width: 138px;
    text-align: left;
    cursor: pointer;
    position: relative;
    max-width: min(32vw, 280px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-block: var(--interactive-element-margin-block);
}

.filter-control.is-active .filter-button {
    background: var(--interactive-active-bg);
    border-color: var(--interactive-active-border);
}

.filter-button::after {
    content: "";
    position: absolute;
    right: 12px;
    top: 50%;
    width: 7px;
    height: 7px;
    border-right: 1px solid #666666;
    border-bottom: 1px solid #666666;
    transform: translateY(-65%) rotate(45deg);
    pointer-events: none;
}

.filter-control.is-open .filter-button::after {
    transform: translateY(-35%) rotate(-135deg);
}

.filter-search-input {
    width: 100%;
    min-height: var(--control-height);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: var(--control-padding-filter-input-with-clear);
    background: var(--color-white);
    font-family: inherit;
}

.filter-search-input-wrap {
    position: relative;
    width: 100%;
}

.filter-search-input::-webkit-search-decoration,
.filter-search-input::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
}

.filter-search-clear {
    appearance: none;
    border: 0;
    background: transparent;
    color: var(--accent-dark);
    position: absolute;
    top: 50%;
    right: 6px;
    transform: translateY(-50%);
    width: 22px;
    height: 22px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    line-height: 1;
    font-size: 24px;
    cursor: pointer;
}

.filter-search-clear[hidden] {
    display: none;
}

.filter-search-clear:focus-visible {
    outline: 2px solid var(--accent-dark);
    outline-offset: 1px;
}

.filters-result-count {
    flex: 0 0 auto;
    white-space: nowrap;
}

.filter-panel {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    min-width: 260px;
    max-width: min(88vw, 360px);
    max-height: 360px;
    overflow: auto;
    background: var(--surface-gray);
    border: 1px solid #ffffff;
    border-radius: var(--radius);
    padding: 10px 12px 14px;
    box-shadow: var(--filter-panel-shadow);
    z-index: 30;
    scrollbar-gutter: stable both-edges;
}

.sg-pulldown-demo[data-filter="sort"] .sg-pulldown-panel,
.sg-pulldown-demo[data-filter="region"] .sg-pulldown-panel,
.sg-pulldown-demo[data-filter="country"] .sg-pulldown-panel,
.sg-pulldown-demo[data-filter="industry"] .sg-pulldown-panel,
.sg-pulldown-demo[data-peer-filter="sort"] .sg-pulldown-panel {
    min-width: 260px;
    width: auto;
    max-width: min(88vw, 360px);
}

.sg-pulldown-demo[data-filter="industry"] .sg-pulldown-panel {
    min-width: 338px;
    max-width: min(88vw, 468px);
}

.sg-pulldown-demo[data-filter="sort"] .sg-pulldown-panel,
.sg-pulldown-demo[data-peer-filter="sort"] .sg-pulldown-panel {
    min-width: 300px;
}

.filter-panel--metrics {
    min-width: 560px;
    max-width: min(92vw, 760px);
}

.filter-panel[hidden] {
    display: none;
}

.filter-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 4px;
}

.filter-list.sg-pulldown-panel__checkbox-list {
    margin-top: var(--spacing-large);
}

.filter-list li {
    margin: 0;
}

.filter-option {
    display: inline-flex;
    align-items: flex-start;
    gap: 8px;
    cursor: pointer;
}

.filter-option.is-unavailable .filter-option-text {
    opacity: 0.55;
}

.filter-option.is-disabled {
    cursor: not-allowed;
}

.filter-option input {
    width: 16px;
    height: 16px;
    margin-top: 2px;
    flex: 0 0 auto;
}

.filter-option-text {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    line-height: 1.25;
    white-space: normal;
}

.filter-subregion-list {
    list-style: none;
    margin: 4px 0 8px 26px;
    padding: 0;
    display: grid;
    gap: 4px;
}

.filter-search-wrap {
    margin: 0 0 10px;
}

.filter-search-wrap input {
    width: 100%;
    min-height: var(--control-height);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: var(--control-padding-filter-panel-input);
    font-family: inherit;
    background: var(--color-white);
}

.filter-sort-option {
    display: block;
    width: 100%;
    border: 0;
    border-radius: var(--radius);
    padding: 8px 10px;
    background: transparent;
    color: var(--ink);
    text-align: left;
    cursor: pointer;
}

.filter-sort-option.is-active {
    background: #ffffff;
    font-weight: 600;
}

.metrics-filter-value {
    flex: 0 0 auto;
    min-width: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-weight: 400;
    color: var(--ink);
}

.sg-pulldown-panel .sg-checkbox-field-option {
    display: flex;
    align-items: center;
    min-height: var(--small-interaction-element-size);
}

.sg-pulldown-panel .sg-checkbox-field-option > span {
    line-height: var(--line-height-base);
    font-weight: var(--font-weight-regular);
}

@media (hover: hover) and (pointer: fine) {
    .filter-search-clear:hover {
        background: var(--chip-light);
    }

    .rating-card-peer-button:hover {
        background: rgba(255, 255, 255, 0.12);
    }
}

.btn {
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--btn-height);
    padding: var(--button-padding-vertical) var(--button-padding-horizontal);
    border: var(--btn-border-width) solid var(--btn-border);
    border-radius: var(--radius);
    background: var(--btn-bg);
    color: var(--btn-text);
    font-weight: var(--standard-button-font-face);
    font-family: inherit;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
    margin-block: var(--interactive-element-margin-block);
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.btn:focus-visible {
    outline: 2px solid var(--btn-border);
    outline-offset: 2px;
}

.btn--on-dark {
    border-color: var(--btn-border-on-dark);
    color: var(--btn-text-on-dark);
}

.btn--solid {
    background: var(--accent-dark);
    border-color: var(--accent-dark);
    color: var(--color-white);
}

.btn--nav {
    background: var(--color-white);
    border-color: transparent;
    color: var(--chip);
}

.btn--nav:focus-visible {
    outline-color: var(--chip);
}

.btn--icon {
    width: var(--btn-icon-size);
    min-width: var(--btn-icon-size);
    min-height: var(--btn-icon-size);
    padding: 0;
}

.btn--compact {
    min-height: var(--btn-height-compact);
    padding-top: var(--button-padding-vertical-compact);
    padding-bottom: var(--button-padding-vertical-compact);
}

.btn.is-busy {
    background: var(--interactive-active-bg);
    border-color: var(--interactive-active-border);
    color: var(--interactive-active-text);
    cursor: progress;
    opacity: 0.8;
}

.btn--align-end {
    margin-left: auto;
}

.btn--align-start {
    margin-left: 0;
}

.btn--full {
    display: flex;
    width: 100%;
}

.btn--mt-md {
    margin-top: 16px;
}

.btn--on-dark:focus-visible {
    outline-color: var(--btn-border-on-dark);
}

.segmented {
    display: inline-flex;
    margin-left: auto;
    border: 1px solid var(--chip-light);
    background: var(--chip);
    border-radius: var(--radius);
    overflow: hidden;
}

.segmented-btn {
    border: none;
    background: transparent;
    color: inherit;
    border-radius: 0;
    border-right: 1px solid var(--color-white);
}

.segmented-btn.active {
    background: var(--chip-light);
    color: var(--ink);
}

.segmented-btn:first-child {
    border-top-left-radius: var(--radius);
    border-bottom-left-radius: var(--radius);
}

.segmented-btn:last-child {
    border-right: none;
    border-top-right-radius: var(--radius);
    border-bottom-right-radius: var(--radius);
}

#load-sentinel {
    height: 1px;
}

.diff {
    font-size: var(--font-size-kennzahl);
    font-weight: var(--font-weight-kennzahl);
    color: var(--ink);
}

.diff.positive {
    color: var(--ampel-positive);
}

.diff.negative {
    color: var(--ampel-negative);
}

.ampel-positive {
    color: var(--ampel-positive);
}

.ampel-negative {
    color: var(--ampel-negative);
}

.ampel-neutral {
    color: var(--ampel-neutral);
}

.ampel-warning {
    color: var(--ampel-warning);
}

.ratings-grid {
    --card-min-width: 395px;
    --card-max-width: 550px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(var(--card-min-width), 1fr));
    justify-content: start;
    column-gap: 6px;
    row-gap: var(--box-stack-gap);
    width: 100%;
}

.peer-groups-grid {
    --card-min-width: 500px;
    --card-max-width: 650px;
}

.rating-card {
    --box-context-radius: var(--box-radius);
    --button-radius: 4px;
    width: 100%;
    min-width: 0;
    max-width: var(--card-max-width);
    height: 600px;
    background: var(--table-body);
    border: 1px solid var(--color-white);
    border-radius: var(--box-context-radius);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.peer-group-card {
    --card-desktop-height: 750px;
}

.rating-card {
    --rating-card-inline-padding: 18px;
    --header-action-margin-block: var(--interactive-element-margin-block);
}

.rating-card--message {
    display: block;
    height: auto;
    text-align: center;
    color: var(--muted);
    padding: 32px 20px;
}

@media (max-width: 760px) {
    .ratings-grid .rating-card--message[data-state="loading"],
    .ratings-grid .rating-card--message[data-state="empty"],
    .peer-groups-grid .rating-card--message[data-state="loading"],
    .peer-groups-grid .rating-card--message[data-state="empty"] {
        height: 460px;
    }
}

@media (min-width: 761px) {
    .ratings-grid .rating-card--message[data-state="loading"],
    .ratings-grid .rating-card--message[data-state="empty"] {
        height: 650px;
    }

    .peer-groups-grid .rating-card--message[data-state="loading"],
    .peer-groups-grid .rating-card--message[data-state="empty"] {
        height: 750px;
    }
}

.sort-icon {
    display: inline-block;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 6px solid currentColor;
    transform: none;
    vertical-align: middle;
    margin-left: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.12s ease;
}

.sorted.asc .sort-icon {
    border-top: none;
    border-bottom: 6px solid currentColor;
}

.sorted.desc .sort-icon {
    border-top: 6px solid currentColor;
}

.rating-card-segment {
    padding: 10px var(--rating-card-inline-padding);
}

.rating-card-segment + .rating-card-segment {
    border-top: 1px solid var(--color-white);
}

.rating-card-segment--top {
    background: var(--panel-blue-emphasis);
    color: var(--color-white);
    padding-top: 5px;
}

.rating-card-segment--metrics,
.rating-card-segment--score {
    background: var(--metrics-segment-bg);
}

.rating-card-segment--analysis {
    background: var(--color-white);
    padding-bottom: 14px;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

.rating-card-title {
    margin: 0;
    min-width: 0;
    align-self: center;
    font-weight: 700;
    color: var(--color-white);
}

.rating-card-head-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.rating-card-menu-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    min-height: var(--btn-icon-size);
}

.rating-card-head-row .rating-card-menu-wrap {
    margin-block: var(--header-action-margin-block);
}

.rating-card-menu-toggle {
    width: 28px;
    min-width: 28px;
    min-height: 28px;
    padding: 6px 3px;
    align-items: center;
    justify-content: center;
    gap: 3px;
    border-width: 1px;
    border-color: var(--color-white);
    border-radius: var(--button-radius);
    background: transparent;
    box-sizing: border-box;
}

.rating-card-menu-toggle.btn--on-dark {
    border-color: var(--color-white);
    background: transparent;
}

.rating-card-menu {
    top: calc(100% + 10px);
    min-width: 150px;
    z-index: 4;
}

.rating-card-menu-action {
    display: block;
    width: 100%;
    padding: 10px 12px;
    border: 0;
    background: transparent;
    color: var(--ink);
    font: inherit;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
}

.rating-card-menu-action[disabled] {
    color: var(--muted);
    cursor: not-allowed;
}

.rating-card-menu-toggle span {
    width: 20px;
    height: 3px;
    border-radius: 0;
}

.rating-card-score-row {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 8px 12px;
    margin-top: 4px;
}

.rating-card-metrics-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 18px;
    padding: 8px 0 0;
}

.rating-card-column-item,
.rating-card-score-item,
.rating-card-analysis-item {
    min-width: 0;
}

.rating-card-column-item,
.rating-card-segment-head,
.rating-card-analysis-item {
    color: var(--ink);
}

.rating-card-recommendation-item {
    text-align: right;
}

.rating-card-segment-head {
    margin: 0;
}

.rating-card-segment-head--small {
    font-size: var(--font-size-kennzahl-table-head);
}

.rating-card-analysis-layout {
    margin-top: 6px;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

.rating-card-analysis-grid {
    display: grid;
    gap: 2px;
    margin-top: 0;
    align-content: start;
}

.mobile-bar-line {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 8px;
}

.mobile-bar-line--no-value {
    grid-template-columns: auto minmax(0, 1fr);
}

.rating-card-analysis-item--bar.mobile-bar-line {
    grid-template-columns: minmax(130px, 46%) minmax(0, 1fr) auto;
}

.rating-card-analysis-item--bar.mobile-bar-line--no-value {
    grid-template-columns: minmax(130px, 46%) minmax(0, 1fr);
}

.mobile-bar-label {
    white-space: nowrap;
}

.mobile-inline-bar {
    display: block;
    position: relative;
    width: 100%;
    height: 1em;
    background: var(--scorebar-track);
    border-radius: var(--scorebar-radius);
    overflow: hidden;
}

.mobile-inline-bar--relative {
    overflow: visible;
}

.mobile-inline-bar--with-marker {
    overflow: visible;
}

.mobile-inline-bar--extended {
    overflow: visible;
}

.mobile-inline-bar-center {
    position: absolute;
    top: -1px;
    bottom: -1px;
    left: 50%;
    width: var(--peer-context-relative-median-width);
    transform: translateX(-50%);
    border-radius: 0;
    background: var(--peer-context-relative-median);
    z-index: 2;
}

.mobile-inline-bar-center--extended {
    box-sizing: border-box;
    background: transparent;
    border: 1px solid var(--peer-context-relative-median);
}

.mobile-inline-bar-fill {
    display: block;
    position: relative;
    z-index: 1;
    width: 0;
    height: 100%;
    border-radius: var(--scorebar-radius);
    background: var(--ampel-warning);
}

.mobile-inline-bar-fill--relative {
    position: absolute;
    left: var(--relative-start, 50%);
    width: var(--relative-width, 0%);
    min-width: 0;
}

.mobile-inline-bar-fill.ampel-positive {
    background: var(--ampel-positive);
}

.mobile-inline-bar-fill.ampel-warning {
    background: var(--ampel-warning);
}

.mobile-inline-bar-fill.ampel-negative {
    background: var(--ampel-negative);
}

.mobile-inline-bar-fill.ampel-neutral {
    background: var(--ampel-neutral);
}

.mobile-inline-bar-marker {
    position: absolute;
    top: -1px;
    bottom: -1px;
    width: var(--peer-context-marker-width);
    left: clamp(
        var(--peer-context-marker-safe-offset),
        var(--marker-position, 0%),
        calc(100% - var(--peer-context-marker-safe-offset))
    );
    background: var(--peer-context-marker-core);
    border-inline: 0;
    border-radius: 0;
    pointer-events: none;
    z-index: 3;
}

.mobile-inline-bar-marker--extended {
    box-sizing: border-box;
    background: transparent;
    border: 1px solid var(--peer-context-relative-median);
}

.mobile-bar-value {
    white-space: nowrap;
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
}

.peer-context-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 1.5em;
    margin-inline-start: 6px;
    padding: 0 7px;
    border-radius: calc(var(--radius) - 1px);
    background: var(--peer-context-pill);
    color: var(--peer-context-pill-ink);
    font-size: 0.95em;
    font-weight: 600;
    line-height: 1.2;
}

.rating-card-analysis-summary {
    margin-top: 10px;
    min-width: 0;
    border-left: 0;
    padding-left: 0;
    white-space: pre-line;
    overflow: visible;
}

.ui-box-segment-actions,
.rating-card-footer-actions {
    display: flex;
    flex-direction: var(--button-flow-direction);
    justify-content: flex-end;
    gap: var(--button-gap-horizontal);
    margin-top: auto;
    padding-top: 16px;
}

.ui-box-action-button,
.rating-card-footer-button {
    flex: 1 1 0;
    width: 100%;
    padding: var(--button-padding-vertical) var(--button-padding-horizontal);
    white-space: normal;
    text-align: center;
    border-radius: var(--button-radius);
}

.rating-card-footer-button--disabled {
    border-color: var(--interactive-inactive-border);
    color: var(--interactive-inactive-text);
    background: var(--color-white);
    cursor: not-allowed;
}

.rating-card-footer-button--disabled:focus-visible {
    outline-color: var(--interactive-inactive-border);
}

.rating-card-footer-button--disabled,
.rating-card-footer-button--disabled span {
    color: var(--interactive-inactive-text);
}

.peer-group-card {
    background: var(--peer-context-surface);
}

.peer-group-card .rating-card-segment--top {
    background: var(--peer-context-header);
}

.peer-group-card .rating-card-segment + .rating-card-segment {
    border-top-color: var(--color-white);
}

.peer-group-card-segment,
.peer-group-card-segment--meta,
.peer-group-card-segment--score,
.peer-group-card-segment--metrics {
    background: var(--peer-context-surface);
}

.peer-group-card-segment--meta {
    color: var(--ink);
}

.peer-group-card-section-title {
    margin: 0 0 8px;
    font-weight: 400;
    color: var(--ink);
}

.peer-group-card-summary {
    margin-top: 18px;
}

@media (min-width: 761px) {
    .peer-group-card {
        height: var(--card-desktop-height);
    }
}

@media (max-width: 960px) {
    .filters-body {
        flex-wrap: wrap;
    }
}

@media (max-width: 760px) {
    :root {
        --font-size-h1: 1.26rem;
    }

    html {
        overflow-x: hidden;
    }

    .page {
        padding: 0;
        overflow-x: hidden;
    }

    .filters {
        padding: 10px 16px;
        border-bottom: 1px solid var(--line);
        background: var(--filters-surface-bg);
    }

    .filters-body {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
        align-items: start;
    }

    .filter-control {
        min-width: 0;
    }

    .filter-control[data-filter="sort"],
    .filter-control[data-filter="region"],
    .filter-control[data-filter="country"],
    .filter-control[data-filter="industry"],
    .filter-control[data-filter="metrics"],
    .filter-control--search {
        min-width: 0;
    }

    .filter-control--search {
        width: auto;
    }

    .filter-control[data-filter="sort"] .filter-button,
    .filter-control[data-filter="region"] .filter-button,
    .filter-control[data-filter="country"] .filter-button,
    .filter-control[data-filter="industry"] .filter-button,
    .filter-control[data-filter="metrics"] .filter-button,
    .filter-control--search .filter-search-input {
        width: 100%;
        max-width: none;
    }

    .filters-body > .info-tip-inline-group {
        display: flex;
        width: 100%;
        min-width: 0;
    }

    .filters-body > .info-tip-inline-group .filter-control--search {
        flex: 1 1 auto;
        min-width: 0;
    }

    .filters-result-count {
        width: 100%;
        grid-column: 1 / -1;
    }

    .peer-groups-filters .filter-control[data-peer-filter="sort"],
    .peer-groups-filters .filter-control[data-peer-filter="metrics"],
    .peer-groups-filters .filter-control[data-peer-filter="search"],
    .peer-groups-filters .filters-result-count {
        min-width: 0;
    }

    .peer-groups-filters .filter-control[data-peer-filter="sort"] .filter-button,
    .peer-groups-filters .filter-control[data-peer-filter="metrics"] .filter-button,
    .peer-groups-filters .filter-control[data-peer-filter="search"] .filter-search-input {
        width: 100%;
        max-width: none;
    }

    .peer-groups-filters .filters-result-count {
        width: auto;
        grid-column: auto;
        align-self: center;
    }

    .filters {
        padding-top: 0;
    }

    .peer-compare-toggle,
    .evaluation-mode-toggle {
        width: 100%;
        grid-column: 1 / -1;
        justify-content: flex-end;
        margin-left: 0;
        order: -1;
        margin-top: 0;
        margin-bottom: 10px;
        margin-right: 0;
        margin-left: 0;
        padding: 8px 0;
        background: var(--surface-gray);
        border-bottom: 1px solid var(--color-white);
    }

    .detail-local-evaluation-mode {
        width: auto;
        grid-column: auto;
        justify-content: flex-start;
        order: 1;
        margin: 0;
        padding: 0;
        background: transparent;
        border-bottom: 0;
    }

    .detail-local-controls {
        justify-content: flex-start;
        gap: 12px;
    }

    .detail-local-menu-wrap {
        margin-left: auto;
    }

    .peer-groups-filters .evaluation-mode-toggle {
        background: var(--peer-context-surface);
    }

    .evaluation-mode-label-wrap,
    .evaluation-mode-option {
        flex-shrink: 0;
    }

    .evaluation-mode-label-wrap {
        gap: 6px;
    }

    .filter-button {
        min-width: 0;
        max-width: none;
    }

    .filter-panel {
        top: calc(100% + 10px);
        min-width: 0;
        width: 100%;
        max-width: calc(100vw - 24px);
        padding-bottom: 16px;
    }

    .sg-pulldown-demo[data-filter="sort"] .sg-pulldown-panel,
    .sg-pulldown-demo[data-filter="region"] .sg-pulldown-panel,
    .sg-pulldown-demo[data-filter="country"] .sg-pulldown-panel,
    .sg-pulldown-demo[data-filter="industry"] .sg-pulldown-panel,
    .sg-pulldown-demo[data-peer-filter="sort"] .sg-pulldown-panel {
        top: calc(100% + 10px);
        padding-bottom: 16px;
    }

    .sg-pulldown-demo[data-filter="sort"] .sg-pulldown-panel,
    .sg-pulldown-demo[data-filter="region"] .sg-pulldown-panel {
        left: auto;
        right: 0;
    }

    .sg-pulldown-demo[data-filter="industry"] .sg-pulldown-panel {
        left: auto;
        right: 0;
    }

    .sg-pulldown-demo[data-peer-filter="sort"] .sg-pulldown-panel {
        left: auto;
        right: 0;
    }

    .sg-pulldown-demo[data-filter="metrics"] .sg-pulldown-panel,
    .sg-pulldown-demo[data-peer-filter="metrics"] .sg-pulldown-panel {
        left: auto;
        right: 0;
        width: max-content;
        min-width: 288px;
        max-width: calc(100vw - 24px);
    }

    .metrics-filter-control select {
        max-width: 100%;
    }

    .rating-card-peer-actions {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .header-desktop-only {
        display: none;
    }

    .mobile-menu-wrap {
        display: block;
    }

    .login-card {
        padding: 22px;
    }

    .ratings-grid {
        --card-min-width: 100%;
        --card-max-width: 100%;
        grid-template-columns: minmax(0, 1fr);
        overflow-x: clip;
        max-width: 100%;
    }

    .rating-card {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        height: auto;
    }

    #peer-groups-grid .sg-object-card[data-pattern="object-group-card"] {
        flex: 1 1 100%;
        width: 100%;
        min-width: 0;
        max-width: none;
    }

    .rating-card-analysis-layout {
        flex: 0 0 auto;
        min-height: auto;
        overflow: visible;
    }

    .rating-card-analysis-summary {
        display: block;
        overflow: visible;
        -webkit-line-clamp: unset;
    }

    .rating-card-footer-actions {
        margin-top: 16px;
    }

    .peer-group-detail-mobile-back {
        display: block;
    }

}

.sg-pulldown-demo[data-filter="metrics"] .sg-pulldown-panel,
.sg-pulldown-demo[data-peer-filter="metrics"] .sg-pulldown-panel,
.sg-pulldown-demo[data-list-filter="metrics"] .sg-pulldown-panel {
    left: auto;
    right: 0;
    width: clamp(288px, 80vw, var(--layout-multiselect-pulldown-panel-desktop-width));
    min-width: 288px;
    max-width: calc(100vw - 24px);
}

.drawer-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
    z-index: 20;
}

.drawer {
    position: fixed;
    top: 0;
    right: 0;
    height: 100%;
    width: 50%;
    max-width: 900px;
    background: var(--color-white);
    transform: translateX(100%);
    transition: transform 0.25s ease;
    z-index: 30;
    box-shadow: -8px 0 20px rgba(0, 0, 0, 0.15);
}

.drawer iframe {
    width: 100%;
    height: 100%;
    border: 0;
}

.drawer.is-open {
    transform: translateX(0);
}

.drawer-overlay.is-open {
    opacity: 1;
    pointer-events: auto;
}

@media (max-width: 979px) {
    .drawer,
    .drawer-overlay {
        display: none;
    }
}

.detail-page {
    width: 100%;
    max-width: 100%;
}

.detail-header {
    background: var(--accent);
    color: var(--color-white);
    padding: 18px 18px 14px;
}

.detail-back-row {
    background: var(--panel-light);
    padding: 10px 18px;
    border-bottom: 1px solid var(--color-white);
}

@media (min-width: 768px) {
    .is-embedded .detail-back-row {
        display: none;
    }
}

.is-embedded-wide .detail-back-row {
    display: none;
}

@media (min-width: 761px) {
    .detail-sg-back-card-top-mobile-only {
        display: none;
    }

    .detail-sg-back-card-bottom-mobile-only {
        display: none;
    }
}

.is-embedded-wide .detail-header {
    display: none;
}

@media (max-width: 760px) {
    .detail-header {
        display: none;
    }
}

.detail-back-link {
    display: inline-block;
    color: var(--chip);
    text-decoration: none;
    font-weight: var(--font-weight-regular);
}

.detail-heading {
    display: inline-flex;
    align-items: center;
    gap: 0;
}

.info-tip {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: inherit;
    font-size: var(--font-size-text);
    font-weight: 400;
    line-height: var(--line-height-text);
    width: 18px;
    height: 18px;
    border-radius: 999px;
    border: 1px solid var(--info-tip-gray-80);
    color: var(--info-tip-gray-80);
    background: var(--surface-gray);
    margin-inline-start: var(--info-tip-gap);
    cursor: help;
    outline: none;
}

.info-tip::before {
    content: "?";
}

.info-tip-text {
    position: absolute;
    display: block;
    left: 0;
    top: calc(100% + 8px);
    transform: translate(var(--tip-shift, 0px), -4px);
    min-width: 220px;
    max-width: 320px;
    padding: 8px 10px;
    border-radius: var(--radius);
    border: 1px solid var(--line);
    background: var(--color-white);
    color: var(--ink);
    font-family: inherit;
    font-size: var(--font-size-text);
    font-weight: 400;
    line-height: var(--line-height-text);
    white-space: pre-line;
    text-align: left;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease, transform 0.15s ease;
    z-index: 5;
}

.info-tip:hover .info-tip-text,
.info-tip.is-open .info-tip-text,
.info-tip:focus-visible .info-tip-text {
    opacity: 1;
    transform: translate(var(--tip-shift, 0px), 0);
}

.info-tip.is-open .info-tip-text {
    pointer-events: auto;
    max-height: min(60vh, 420px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
}

.info-tip:focus-visible {
    box-shadow: 0 0 0 2px rgba(89, 113, 177, 0.35);
}

@media (max-width: 640px) {
    .info-tip-text {
        max-width: 85vw;
    }
}

@media (max-width: 767px) {
    .sg-object-card[data-pattern="object-group-card"] {
        flex: 1 1 100%;
        width: 100%;
        min-width: 0;
        max-width: none;
    }
}

.detail-columns {
    display: grid;
    gap: 2px 12px;
}

.detail-columns-2 {
    grid-template-columns: 1fr 1fr;
}

.detail-meta-columns {
    margin-top: 8px;
}

.detail-meta-col {
    display: grid;
    gap: 6px;
    align-content: start;
}

.detail-meta-item {
    margin: 0;
}

.detail-updated-line {
    margin: 0;
}

.detail-fundamental-heading-section {
    padding: 12px calc(16px + var(--ui-box-pad-x, 16px));
    background: transparent;
}

.detail-fundamental-metrics-date {
    margin: 0;
}

.detail-next-analysis-date {
    margin: 4px 0 0;
    font-size: var(--font-size-text);
    line-height: var(--line-height-text);
}

.ui-score-row {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.ui-score-bar {
    flex: 1;
    min-width: 120px;
    height: 20px;
    border-radius: var(--scorebar-radius);
    background: var(--scorebar-track);
    position: relative;
    overflow: hidden;
}

.ui-score-bar--relative {
    overflow: visible;
}

.ui-score-bar--with-marker {
    overflow: visible;
}

.ui-score-bar--relative::before {
    content: "";
    position: absolute;
    top: -1px;
    bottom: -1px;
    left: 50%;
    width: var(--peer-context-relative-median-width);
    transform: translateX(-50%);
    border-radius: 0;
    background: var(--peer-context-relative-median);
    z-index: 2;
}

.ui-score-peer-marker {
    position: absolute;
    top: -1px;
    bottom: -1px;
    width: var(--peer-context-marker-width);
    left: clamp(
        var(--peer-context-marker-safe-offset),
        var(--marker-position, 0%),
        calc(100% - var(--peer-context-marker-safe-offset))
    );
    background: var(--peer-context-marker-core);
    border-inline: 0;
    border-radius: 0;
    z-index: 3;
}

.ui-score-fill {
    display: block;
    position: relative;
    z-index: 1;
    width: 78%;
    height: 100%;
    border-radius: var(--scorebar-radius);
    background: var(--ampel-neutral);
}

.ui-score-fill--relative {
    position: absolute;
    left: var(--relative-start, 50%);
    width: var(--relative-width, 0%);
}

.ui-score-fill.ampel-positive {
    background: var(--ampel-positive);
}

.ui-score-fill.ampel-warning {
    background: var(--ampel-warning);
}

.ui-score-fill.ampel-negative {
    background: var(--ampel-negative);
}

.ui-box-metrics {
    margin: 0;
    display: grid;
    gap: 6px;
}

.ui-box-metric-date {
    margin: 0;
}

.ui-box-metric {
    margin: 0;
}

.detail-metrics-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

.detail-metrics-table thead th {
    padding: 0 10px 6px 0;
    color: var(--detail-table-head-ink);
    font-size: var(--font-size-kennzahl-table-head);
    line-height: var(--line-height-text);
    font-weight: 400;
    text-align: left;
}

.detail-metrics-table thead th:first-child {
    width: 54%;
}

.detail-metrics-table th,
.detail-metrics-table td {
    padding: 0 10px 0 0;
    vertical-align: top;
}

.detail-metrics-table thead th:last-child,
.detail-metrics-table tbody td:last-child {
    padding-right: 0;
}

.detail-metrics-table tbody th,
.detail-metrics-table tbody td {
    padding-top: 6px;
}

.detail-metrics-table tbody th {
    color: var(--ink);
    font-size: var(--font-size-kennzahl);
    line-height: var(--line-height-text);
    font-weight: var(--font-weight-kennzahl);
    text-align: left;
}

.detail-metrics-table tbody td {
    color: var(--ink);
    width: 18%;
}

.detail-metrics-table tbody td[data-peer-only] .kennzahl-value {
    font-weight: 400;
}

.detail-metrics-table [data-peer-only][hidden] {
    display: none;
}

.detail-about-header {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 0;
}

.detail-about.is-open .detail-about-header {
    margin-bottom: 14px;
}

.detail-about-header h2 {
    margin: 0;
}

@media (hover: hover) and (pointer: fine) {
    .mobile-menu-link:hover {
        background: var(--surface-gray);
    }

    .detail-back-link:hover {
        text-decoration: underline;
    }

}

.detail-section {
    margin: 0;
    padding: 12px 16px;
    background: transparent;
    border-radius: 0;
}

.valuation-chart-segment {
    padding-top: 0;
    padding-left: 0;
    padding-right: 0;
}

.growth-chart-segment {
    padding-top: 0;
    padding-left: 0;
    padding-right: 0;
}

.profitability-chart-segment {
    padding-top: 0;
    padding-left: 0;
    padding-right: 0;
}

.stability-chart-segment {
    padding-top: 0;
    padding-left: 0;
    padding-right: 0;
}

.valuation-chart {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 10px 0 0;
}

.growth-chart {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 10px 0 0;
}

.profitability-chart {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 10px 0 0;
}

.stability-chart {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 10px 0 0;
}

.growth-chart-head {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}

.valuation-chart-head {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 8px;
    width: 100%;
}

.valuation-chart-head-left {
    flex: 1 1 auto;
    min-width: 0;
}

.valuation-chart-head-right {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: flex-end;
    min-width: max-content;
}

.valuation-chart-head .valuation-chart-tabs {
    flex: 0 0 auto;
}

.valuation-chart-mode-toggle {
    display: inline-flex;
    flex: 0 0 auto;
    white-space: nowrap;
    width: auto !important;
    max-width: none !important;
}

.profitability-chart-head {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}

.stability-chart-head {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}

.growth-chart-head .valuation-chart-tabs {
    flex: 1 1 auto;
}

.profitability-chart-head .valuation-chart-tabs {
    flex: 1 1 auto;
}

.stability-chart-head .valuation-chart-tabs {
    flex: 1 1 auto;
}

.growth-chart-timeframe {
    flex-wrap: nowrap;
}

.profitability-chart-timeframe {
    flex-wrap: nowrap;
}

.stability-chart-timeframe {
    flex-wrap: nowrap;
}

@media (max-width: 640px) {
    .valuation-chart-head {
        align-items: center;
        flex-direction: row;
        flex-wrap: nowrap;
    }

    .valuation-chart-head-right {
        min-width: 0;
        margin-left: auto;
    }

    .valuation-chart-mode-toggle {
        width: auto !important;
        font-size: 0.95em;
    }
}

@media (max-width: 390px) {
    .valuation-chart-head {
        gap: 6px;
    }

    .valuation-chart-mode-toggle {
        font-size: 0.9em;
    }

    .valuation-chart-mode-toggle .sg-mode-toggle__label {
        padding-left: 0;
        padding-right: 0;
    }
}

@media (max-width: 340px) {
    .valuation-chart-head {
        align-items: flex-start;
        flex-direction: column;
    }

    .valuation-chart-head-right {
        margin-left: 0;
    }
}

.valuation-chart-timeframe {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-small);
    background: var(--color-light-grey);
    padding: 0;
    border-radius: calc(var(--radius) + 0px);
}

.valuation-chart-range {
    border: 0;
    border-radius: var(--radius);
    color: var(--ink);
    font-weight: 600;
    padding: 4px 14px;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease;
}

.valuation-chart-range {
    font-size: var(--font-size-kennzahl-table-head);
    font-weight: 400;
}

.valuation-chart-range-change {
    margin-left: auto;
    color: var(--detail-table-head-ink);
    font-size: var(--font-size-kennzahl-table-head);
    font-weight: 400;
    line-height: var(--line-height-text);
    white-space: nowrap;
}

.valuation-chart-range-change.ampel-positive {
    color: var(--ampel-positive);
}

.valuation-chart-range-change.ampel-negative {
    color: var(--ampel-negative);
}

.valuation-chart-range-change.ampel-neutral {
    color: var(--ampel-neutral);
}

.valuation-chart-canvas-wrap {
    position: relative;
    min-height: 220px;
}

.valuation-chart-note {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 1;
    max-width: calc(100% - 32px);
    font-size: var(--font-size-kennzahl-table-head);
    font-weight: 400;
    line-height: var(--line-height-text);
    text-align: center;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.valuation-chart-canvas-wrap canvas {
    width: 100%;
    height: 220px;
    background: var(--color-light-grey);
}

.growth-chart-canvas-wrap {
    position: relative;
    min-height: 208px;
}

.growth-chart-canvas-wrap canvas {
    width: 100%;
    height: 208px;
    background: var(--color-light-grey);
}

.profitability-chart-canvas-wrap {
    position: relative;
    min-height: 208px;
}

.profitability-chart-canvas-wrap canvas {
    width: 100%;
    height: 208px;
    background: var(--color-light-grey);
}

.stability-chart-canvas-wrap {
    position: relative;
    min-height: 208px;
}

.stability-chart-canvas-wrap canvas {
    width: 100%;
    height: 208px;
    background: var(--color-light-grey);
}

.growth-chart-legend {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 0;
    color: var(--detail-table-head-ink);
    font-size: var(--font-size-kennzahl-table-head);
    line-height: var(--line-height-text);
    font-weight: 400;
}

.profitability-chart-legend {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 0;
    color: var(--detail-table-head-ink);
    font-size: var(--font-size-kennzahl-table-head);
    line-height: var(--line-height-text);
    font-weight: 400;
}

.stability-chart-legend {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 0;
    color: var(--detail-table-head-ink);
    font-size: var(--font-size-kennzahl-table-head);
    line-height: var(--line-height-text);
    font-weight: 400;
}

.growth-chart-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.growth-chart-legend-item::before {
    content: '';
    width: 16px;
    height: 16px;
    border-radius: 2px;
    background: var(--legend-marker-color, #5971b1);
}

.growth-chart-legend-item.growth-chart-legend-item--ampel::before,
.profitability-chart-legend-item.profitability-chart-legend-item--ampel::before,
.stability-chart-legend-item.stability-chart-legend-item--ampel::before,
.valuation-chart-legend-item.valuation-chart-legend-item--ampel::before {
    content: none;
}

.growth-chart-legend-item[data-legend="peer"]::before {
    background: var(--legend-marker-fill, var(--scorebar-track));
    border: 0;
}

.growth-chart-legend-item[data-legend="peer"] {
    --legend-marker-color: #5f6673;
    --legend-marker-fill: var(--scorebar-track);
}

.growth-chart-legend.is-relative .growth-chart-legend-item[data-legend="peer"]::before {
    width: 18px;
    height: 0;
    border-radius: 0;
    background: transparent;
    border: 0;
    border-top: 1.5px dashed var(--legend-marker-color, #5f6673);
}

.profitability-chart-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.stability-chart-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.profitability-chart-legend-item::before {
    content: '';
    width: 16px;
    height: 16px;
    border-radius: 2px;
    background: var(--legend-marker-color, #5971b1);
}

.stability-chart-legend-item::before {
    content: '';
    width: 16px;
    height: 16px;
    border-radius: 2px;
    background: var(--legend-marker-color, #5971b1);
}

.profitability-chart-legend-item[data-legend="peer"]::before {
    background: var(--legend-marker-fill, var(--scorebar-track));
    border: 0;
}

.stability-chart-legend-item[data-legend="peer"]::before {
    background: var(--legend-marker-fill, var(--scorebar-track));
    border: 0;
}

.profitability-chart-legend-item[data-legend="peer"] {
    --legend-marker-color: #5f6673;
    --legend-marker-fill: var(--scorebar-track);
}

.stability-chart-legend-item[data-legend="peer"] {
    --legend-marker-color: #5f6673;
    --legend-marker-fill: var(--scorebar-track);
}

.chart-legend-marker,
.growth-chart-legend-marker {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    gap: 2px;
}

.chart-legend-marker__box,
.growth-chart-legend-marker__box {
    width: 4px;
    height: 16px;
    border-radius: 2px;
}

.chart-legend-marker__box--positive,
.growth-chart-legend-marker__box--positive {
    background: var(--ampel-positive);
}

.chart-legend-marker__box--warning,
.growth-chart-legend-marker__box--warning {
    background: var(--ampel-warning);
}

.chart-legend-marker__box--negative,
.growth-chart-legend-marker__box--negative {
    background: var(--ampel-negative);
}

.valuation-chart-legend-marker--negative {
    display: inline-block;
    width: 15px;
    height: 4px;
    border-radius: 0;
    background: var(--legend-marker-color, currentColor);
}

.profitability-chart-legend.is-relative .profitability-chart-legend-item[data-legend="peer"]::before {
    width: 18px;
    height: 0;
    border-radius: 0;
    background: transparent;
    border: 0;
    border-top: 1.5px dashed var(--legend-marker-color, #5f6673);
}

.stability-chart-legend.is-relative .stability-chart-legend-item[data-legend="peer"]::before {
    width: 18px;
    height: 0;
    border-radius: 0;
    background: transparent;
    border: 0;
    border-top: 1.5px dashed var(--legend-marker-color, #5f6673);
}

.valuation-chart-legend {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    font-weight: 400;
    color: var(--detail-table-head-ink);
    font-size: var(--font-size-kennzahl-table-head);
    line-height: var(--line-height-text);
    margin: 0;
    padding: 0;
}

.valuation-chart-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.valuation-chart-legend-item::before {
    content: '';
    width: 18px;
    height: 3px;
    border-radius: 999px;
    background: var(--legend-marker-color, currentColor);
    display: inline-block;
}

.valuation-chart-legend-item[data-legend="peer"]::before {
    height: 0;
    border-radius: 0;
    background: transparent;
    border-top: 1.5px dashed var(--legend-marker-color, currentColor);
}

.child-box {
    border-radius: var(--child-box-radius);
    background: var(--color-light-grey);
    border: 0;
    box-shadow: none;
    padding: 16px;
}

.child-box.valuation-chart {
    padding: 10px 0 0;
}

.child-box.growth-chart {
    padding: 10px 0 0;
}

.child-box.profitability-chart {
    padding: 10px 0 0;
}

.child-box.stability-chart {
    padding: 10px 0 0;
}

.child-box + .child-box {
    margin-top: var(--child-box-gap);
}

.detail-subheading-spaced {
    margin-top: 0;
    padding-top: 18px;
}

.ui-box-segment {
    margin: 0 calc(-1 * var(--segment-pad-x));
    padding: 8px var(--segment-pad-x);
    background: var(--standard-content-box-color);
    border-top: 1px solid var(--color-white);
    border-bottom: 1px solid var(--color-white);
}

.ui-box-segment--emphasis {
    background: var(--standard-content-box-color);
    --detail-muted-color: var(--ink);
}

.ui-box-segment .ui-segment-row.ui-segment-row--full-bleed {
    margin: 0 calc(-1 * var(--segment-pad-x));
    padding: var(--segment-row-pad-y) var(--segment-pad-x);
    background: inherit;
    border-top: 1px solid var(--color-white);
}

.ui-box-segment .ui-segment-row--full-bleed::before {
    content: none;
}

.ui-box-segment {
    --segment-pad-x: var(--ui-box-pad-x, 16px);
    --segment-row-pad-y: 8px;
}

.ui-box-segment.ui-box-segment--rows-equal-height {
    padding-top: 0;
    padding-bottom: 0;
}

.ui-box-segment .ui-segment-row {
    position: relative;
    padding: var(--segment-row-pad-y) 0;
}

.ui-box-segment .ui-segment-row + .ui-segment-row::before {
    content: "";
    position: absolute;
    top: 0;
    left: calc(-1 * var(--segment-pad-x));
    right: calc(-1 * var(--segment-pad-x));
    border-top: 1px solid var(--color-white);
}

.ui-box-segment--light {
    background: var(--panel-light);
}

.ui-box-segment--text {
    background: var(--color-white);
}

.detail-valuation-date {
    margin: 0;
}

.ui-box-segment--blue-emphasis {
    background: var(--standard-content-box-header-colour);
    color: var(--color-white);
    --detail-muted-color: var(--color-white);
}

.ui-box-segment--blue-light {
    background: var(--panel-blue-light);
}

.detail-subcontent-spaced {
    padding-bottom: 10px;
}

.topic-segment-divider,
.ui-segment-divider {
    border-top: 1px solid var(--topic-box-divider);
}

.ui-box-head {
    margin: calc(-1 * var(--ui-box-pad-y, 8px)) calc(-1 * var(--ui-box-pad-x, 16px)) 0;
    padding: 8px var(--ui-box-pad-x, 16px);
    background: transparent;
    border-bottom: 1px solid var(--topic-box-divider);
}

.ui-box-head--gray {
    background: var(--box-header-gray);
}

.ui-box-head--blue-emphasis {
    background: var(--standard-content-box-header-colour);
    color: var(--color-white);
    --detail-muted-color: var(--color-white);
}

.ui-box-head--blue-light {
    background: var(--panel-blue-light);
}

.ui-box > :is(.ui-box-head, .ui-box-segment) + .ui-box-segment {
    margin-top: 0;
    border-top: 0;
}

.ui-box > .ui-box-segment:first-child {
    margin-top: calc(-1 * var(--ui-box-pad-y, 8px));
    padding-top: calc(var(--segment-row-pad-y, 8px) + var(--ui-box-pad-y, 8px));
    border-top: 0;
}

.ui-box > .ui-box-segment:last-child {
    margin-bottom: calc(-1 * var(--ui-box-pad-y, 8px));
    padding-bottom: calc(var(--segment-row-pad-y, 8px) + var(--ui-box-pad-y, 8px));
    border-bottom: 0;
}

.ui-box > :is(.ui-box-head, .ui-box-segment) + :not(:is(.ui-box-head, .ui-box-segment)) {
    margin-top: 8px;
}

.ui-box-head .detail-line {
    margin-bottom: 0;
}

.detail-line {
    display: block;
    margin-bottom: 6px;
}

.ui-score-row.detail-line {
    display: flex;
}

.detail-strong {
    font-size: var(--font-size-kennzahl);
    line-height: var(--line-height-text);
    font-weight: var(--font-weight-kennzahl);
}

.detail-strong .diff {
    font-weight: var(--font-weight-kennzahl);
}

.detail-muted {
    font-size: var(--font-size-text);
    line-height: var(--line-height-text);
    color: var(--detail-muted-color, var(--muted));
}

.detail-value {
    font-size: var(--font-size-kennzahl);
    font-weight: var(--font-weight-kennzahl);
}

.detail-multiline {
    white-space: pre-line;
}

.detail-overall-lead {
    margin: 0 0 8px;
}

.detail-about-toggle,
.detail-diff-toggle {
    font-weight: 400;
}

.detail-diff-toggle {
    margin-top: 16px;
}

.detail-diff-content {
    margin-top: 16px;
}

.detail-diff-heading {
    margin: 0 0 8px;
    font-size: var(--font-size-text);
    line-height: var(--line-height-text);
    font-weight: 700;
}

.detail-content {
    margin: 4px 8px 8px;
    display: grid;
    gap: calc(var(--box-stack-gap) * 2);
    background: transparent;
    border: 0;
    border-radius: 0;
    overflow: visible;
}

.ui-segment-box {
    --box-context-radius: var(--segment-box-border-radius);
    border: 0;
    outline: 0;
}

.ui-content-box,
.ui-box {
    --content-box-border-radius: var(--segment-box-border-radius);
    --content-box-padding-horizontal: var(--segment-box-padding-horizontal);
    --content-box-padding-vertical: var(--segment-box-padding-vertical);
    --content-box-margin-horizontal: var(--segment-box-margin-horizontal);
    --content-box-margin-vertical: var(--segment-box-margin-vertical);
    --ui-box-pad-x: var(--content-box-padding-horizontal);
    --ui-box-pad-y: var(--content-box-padding-vertical);
    --box-context-radius: var(--content-box-border-radius);
    margin: var(--content-box-margin-vertical) var(--content-box-margin-horizontal);
    padding: var(--ui-box-pad-y) var(--ui-box-pad-x);
    background: var(--standard-content-box-color);
    border: 0;
    border-radius: var(--box-context-radius);
    box-shadow: var(--box-shadow);
    overflow: hidden;
}

.ui-box--overflow-visible {
    overflow: visible;
}

.topic-box {
    --box-context-radius: var(--box-radius);
    background: var(--box-surface);
    border: 0;
    border-radius: var(--box-context-radius);
    box-shadow: var(--box-shadow);
    overflow: hidden;
}

.admin-peer-form {
    display: grid;
    gap: 12px;
}

.admin-peer-section {
    display: grid;
    gap: 8px;
    padding-top: 8px;
}

.admin-peer-section + .admin-peer-section {
    border-top: 1px solid var(--color-white);
    padding-top: 12px;
}

.admin-peer-section-description {
    margin: 0;
}

.admin-layout {
    display: grid;
    grid-template-columns: minmax(220px, 280px) minmax(0, 1fr);
    gap: var(--box-stack-gap);
    align-items: start;
}

.admin-sidebar {
    position: sticky;
    top: 16px;
}

.admin-content {
    display: grid;
    gap: var(--box-stack-gap);
    min-width: 0;
}

.admin-nav {
    display: grid;
    gap: 8px;
}

.admin-nav-link {
    display: block;
    padding: 8px 10px;
    border: 1px solid transparent;
    border-radius: var(--radius);
    color: var(--ink);
    font-weight: 600;
    text-decoration: none;
    background: transparent;
}

.admin-nav-link:hover,
.admin-nav-link:focus-visible {
    background: var(--panel-light);
    border-color: var(--color-white);
    outline: none;
}

.admin-nav-link.is-active {
    background: var(--panel-blue-emphasis);
    border-color: var(--panel-blue-emphasis);
    color: var(--color-white);
}

.admin-peer-form-grid {
    display: grid;
    gap: 8px 12px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.admin-peer-form-grid--compact {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.admin-form-field {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.admin-form-field--checkbox {
    align-content: end;
}

.admin-form-field input[type="text"],
.admin-form-field input[type="date"],
.admin-form-field input[type="number"],
.admin-form-field textarea,
.admin-form-field select {
    width: 100%;
    min-height: var(--control-height);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--color-white);
    color: var(--ink);
    padding: var(--control-padding-filter-input);
}

.admin-form-field textarea {
    min-height: calc(var(--control-height) * 3);
    resize: vertical;
}

.admin-textarea-readonly {
    background: var(--panel-light);
}

.admin-form-field input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin: 0;
}

.admin-peer-weights {
    display: grid;
    gap: 8px;
}

.admin-peer-weight-grid {
    display: grid;
    gap: 8px 12px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.admin-peer-actions {
    display: inline-flex;
    flex-wrap: wrap;
    gap: var(--interactive-group-gap);
    align-items: center;
}

.admin-peer-feedback {
    margin: 0;
}

.admin-peer-feedback--idle {
    color: var(--ink);
}

.admin-peer-feedback--running {
    color: var(--ampel-warning);
}

.admin-peer-feedback--success {
    color: var(--ampel-positive);
}

.admin-peer-feedback--error {
    color: var(--ampel-negative);
}

.admin-peer-stats {
    display: grid;
    gap: 6px;
    margin-bottom: 12px;
}

.admin-table-wrap--tight {
    margin-bottom: 0;
}

.admin-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid var(--color-white);
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--panel-light);
}

.admin-table th,
.admin-table td {
    padding: 8px 10px;
    text-align: left;
    border-bottom: 1px solid var(--color-white);
    white-space: nowrap;
}

.admin-table th {
    background: var(--chip);
    color: var(--color-white);
    font-weight: 600;
}

.admin-table tr:last-child td {
    border-bottom: 0;
}

.admin-table tbody tr:nth-child(even) {
    background: var(--panel-emphasis);
}

.admin-company-status {
    font-weight: 600;
}

.admin-table-cell-actions {
    white-space: nowrap;
}

.admin-peer-groups {
    display: grid;
    gap: 8px;
}

.admin-peer-distribution {
    display: grid;
    gap: 8px;
    margin-bottom: 12px;
}

.admin-process-overview {
    display: grid;
    gap: 8px;
}

.admin-process-subheading {
    margin: 0 0 8px;
    color: var(--detail-table-head-ink);
    font-size: var(--font-size-text);
    font-weight: 600;
}

.admin-process-table-empty {
    color: var(--detail-table-head-ink);
}

.admin-table td.admin-table-cell-wrap {
    white-space: normal;
    word-break: break-word;
}

.admin-peer-distribution-summary {
    display: grid;
    gap: 6px;
}

.admin-peer-size-sequence-block {
    display: grid;
    gap: 8px;
}

.admin-peer-size-sequence-label {
    margin: 0;
}

.admin-peer-size-sequence {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.admin-peer-size-pill {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 0 10px;
    border: 1px solid var(--color-white);
    border-radius: var(--radius);
    background: var(--panel-light);
    color: var(--ink);
    font-weight: var(--font-weight-kennzahl);
}

.admin-peer-group {
    border: 1px solid var(--color-white);
    border-radius: var(--radius);
    background: var(--panel-light);
    overflow: hidden;
}

.admin-peer-group-summary {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 8px 12px;
    cursor: pointer;
    background: var(--chip);
    color: var(--color-white);
    font-weight: 600;
    padding: 8px 10px;
}

.admin-peer-group-summary-meta {
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0;
}

.admin-peer-group[open] .admin-peer-group-summary {
    border-bottom: 1px solid var(--color-white);
}

.admin-peer-group-meta {
    display: grid;
    gap: 6px;
    padding: 8px 10px;
    border-bottom: 1px solid var(--color-white);
}

.admin-peer-group-meta .detail-line {
    margin: 0;
}

.admin-peer-group-description {
    white-space: pre-wrap;
}

.admin-peer-group-recalc-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 10px;
}

.admin-peer-group-recalc-button {
    white-space: nowrap;
}

.admin-peer-group-recalc-meta {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    margin: 0;
}

.admin-peer-group-recalc-separator {
    padding: 0 2px;
}

.admin-peer-company-history-button {
    width: 100%;
}

.admin-peer-company-history-meta {
    display: grid;
    gap: 2px;
}

.admin-peer-company-history-line {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
}

@media (max-width: 960px) {
    .admin-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .admin-sidebar {
        position: static;
    }

    .admin-peer-form-grid,
    .admin-peer-weight-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .admin-peer-group-recalc-meta {
        display: flex;
    }

}

@media (max-width: 640px) {
    .detail-about-header {
        flex-direction: column;
        align-items: stretch;
    }

    .btn--full-mobile {
        width: 100%;
    }

    .admin-peer-form-grid,
    .admin-peer-weight-grid {
        grid-template-columns: minmax(0, 1fr);
    }

}

/* Styleguide reference page */
.styleguide-page {
    background:
        radial-gradient(circle at top left, rgba(89, 113, 177, 0.18), transparent 28%),
        radial-gradient(circle at 85% 18%, rgba(193, 98, 56, 0.12), transparent 22%),
        linear-gradient(180deg, #f4f6fa 0%, #e9edf3 100%);
    color: var(--ink);
}

.styleguide-shell {
    min-height: 100vh;
    display: grid;
    grid-template-columns: minmax(260px, 320px) minmax(0, 1fr);
}

.styleguide-sidebar {
    position: sticky;
    top: 0;
    align-self: start;
    min-height: 100vh;
    padding: 24px;
}

.styleguide-sidebar-inner {
    display: grid;
    gap: 18px;
    padding: 24px;
    border: 1px solid rgba(255, 255, 255, 0.72);
    border-radius: calc(var(--radius) * 2);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.48)),
        rgba(95, 102, 115, 0.08);
    backdrop-filter: blur(18px);
    box-shadow: 0 18px 40px rgba(73, 89, 120, 0.08);
}

.styleguide-eyebrow,
.styleguide-kicker,
.styleguide-section-index,
.styleguide-type-label {
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.8rem;
    font-weight: 700;
}

.styleguide-eyebrow,
.styleguide-kicker,
.styleguide-section-index {
    color: var(--accent-dark);
}

.styleguide-intro {
    margin: 0;
}

.styleguide-nav {
    display: grid;
    gap: 10px;
}

.styleguide-nav a {
    display: block;
    padding: 10px 12px;
    border: 1px solid rgba(89, 113, 177, 0.16);
    border-radius: var(--radius);
    background: rgba(255, 255, 255, 0.54);
    color: var(--ink);
    text-decoration: none;
    font-weight: 600;
}

.styleguide-nav a:hover,
.styleguide-nav a:focus-visible {
    outline: none;
    border-color: var(--accent);
    background: rgba(255, 255, 255, 0.92);
}

.styleguide-main {
    display: grid;
    gap: 28px;
    padding: 32px 32px 48px 0;
}

.styleguide-hero,
.styleguide-section {
    padding: 28px;
    border: 1px solid rgba(255, 255, 255, 0.82);
    border-radius: calc(var(--radius) * 2);
    background: rgba(255, 255, 255, 0.72);
    box-shadow: 0 18px 48px rgba(73, 89, 120, 0.08);
}

.styleguide-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(280px, 0.9fr);
    gap: 24px;
    padding-top: 36px;
    padding-bottom: 36px;
    overflow: hidden;
    position: relative;
}

.styleguide-hero::after {
    content: "";
    position: absolute;
    inset: auto -40px -60px auto;
    width: 220px;
    height: 220px;
    border-radius: 999px;
    background: radial-gradient(circle, rgba(89, 113, 177, 0.18), transparent 70%);
    pointer-events: none;
}

.styleguide-hero-copy {
    display: grid;
    gap: 12px;
    align-content: start;
}

.styleguide-hero-panel {
    display: grid;
    gap: 16px;
    padding: 18px;
    border: 1px solid rgba(89, 113, 177, 0.14);
    border-radius: calc(var(--radius) * 2);
    background: linear-gradient(180deg, rgba(89, 113, 177, 0.1), rgba(255, 255, 255, 0.96));
}

.styleguide-stat-grid {
    display: grid;
    gap: 12px;
}

.styleguide-stat {
    display: grid;
    gap: 4px;
    padding: 14px 16px;
    border: 1px solid rgba(255, 255, 255, 0.72);
    border-radius: calc(var(--radius) + 5px);
    background: rgba(255, 255, 255, 0.88);
}

.styleguide-stat strong {
    font-size: 1.25rem;
    line-height: 1.1;
}

.styleguide-stat-label,
.styleguide-stat-note,
.styleguide-preview-label,
.styleguide-mini-kicker {
    margin: 0;
    font-size: 0.85rem;
}

.styleguide-stat-label,
.styleguide-mini-kicker {
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 700;
    color: var(--accent-dark);
}

.styleguide-hero-band {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.styleguide-band-pill {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: 0 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.88);
    border: 1px solid rgba(89, 113, 177, 0.12);
    font-weight: 600;
}

.styleguide-hero h2,
.styleguide-section-head h2 {
    margin-bottom: 8px;
}

.styleguide-hero p:last-child,
.styleguide-section-head p,
.styleguide-card p,
.styleguide-placeholder p,
.styleguide-note p,
.styleguide-showcase-head span {
    margin: 0;
}

.public-home-page__cta-card-shell {
    margin-left: auto;
}

.public-home-page__cta-card-body {
    --layout-card-body-content-justify: center;
}

.public-home-page__cta-card-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: stretch;
    column-gap: var(--spacing-large);
}

.public-home-page__cta-card-copy {
    margin: 0;
    min-width: 0;
    display: flex;
    align-items: center;
}

.public-home-page__cta-card-action {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-small);
}

.styleguide-section {
    display: grid;
    gap: 20px;
}

.styleguide-two-column {
    display: grid;
    gap: 20px;
    grid-template-columns: minmax(0, 1.6fr) minmax(260px, 0.8fr);
    align-items: start;
}

.styleguide-section-head {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr);
    gap: 12px;
    align-items: start;
}

.styleguide-card-grid,
.styleguide-placeholder-grid {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.styleguide-showcase {
    display: grid;
    gap: 18px;
}

.styleguide-spec-list {
    display: grid;
    gap: 12px;
}

.styleguide-spec-item {
    display: grid;
    gap: 4px;
    padding: 14px 16px;
    border: 1px solid rgba(89, 113, 177, 0.14);
    border-radius: calc(var(--radius) + 1px);
    background: var(--color-white);
}

.styleguide-spec-label,
.styleguide-spec-token {
    margin: 0;
}

.styleguide-spec-label {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 700;
    color: var(--accent-dark);
}

.styleguide-spec-value {
    font-size: 1rem;
    line-height: 1.35;
}

.styleguide-spec-token {
    color: rgba(95, 102, 115, 0.86);
}

.styleguide-showcase-head {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 8px 16px;
    align-items: baseline;
}

.styleguide-showcase-head h3,
.styleguide-card h3,
.styleguide-placeholder h4 {
    margin: 0 0 8px;
}

.styleguide-card,
.styleguide-placeholder,
.styleguide-type-specimen,
.styleguide-note,
.styleguide-preview-card,
.styleguide-aside-card {
    padding: 18px;
    border: 1px solid rgba(89, 113, 177, 0.14);
    border-radius: calc(var(--radius) + 3px);
    background: var(--color-white);
}

.styleguide-card,
.styleguide-placeholder {
    min-height: 132px;
}

.styleguide-type-specimen {
    display: grid;
    gap: 8px;
}

.styleguide-preview-card,
.styleguide-aside-card {
    display: grid;
    gap: 14px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(233, 237, 243, 0.92));
}

.styleguide-aside-card h3 {
    margin: 0;
}

.styleguide-preview-frame,
.styleguide-wireframe,
.styleguide-preview-form,
.styleguide-chart-demo,
.styleguide-page-recipe {
    min-height: 180px;
    border-radius: calc(var(--radius) + 7px);
    border: 1px solid rgba(89, 113, 177, 0.12);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(207, 214, 230, 0.55));
}

.styleguide-preview-frame {
    display: grid;
    place-items: center;
    gap: 12px;
    padding: 18px;
}

.styleguide-preview-frame--palette {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.styleguide-preview-frame--box-token {
    background: #373c4a;
    display: grid;
    align-content: start;
    gap: 0;
    min-height: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
}

.styleguide-swatch {
    display: block;
    width: 100%;
    min-height: 58px;
    border-radius: calc(var(--radius) + 1px);
    border: 1px solid rgba(255, 255, 255, 0.72);
}

.styleguide-swatch--accent {
    background: var(--accent);
}

.styleguide-swatch--surface {
    background: var(--surface-gray);
}

.styleguide-swatch--chip {
    background: var(--chip);
}

.styleguide-swatch--ink {
    background: var(--text-color);
}

.styleguide-preview-frame--type {
    align-content: center;
    justify-items: start;
}

.styleguide-type-chip {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 0 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(89, 113, 177, 0.14);
    font-weight: 600;
}

.styleguide-wireframe {
    display: grid;
    gap: 14px;
    padding: 18px;
}

.styleguide-wireframe-bar {
    height: 26px;
    border-radius: calc(var(--radius) + 1px);
    background: rgba(89, 113, 177, 0.22);
}

.styleguide-wireframe-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    flex: 1 1 auto;
}

.styleguide-wireframe-grid span,
.styleguide-page-recipe-body span {
    display: block;
    min-height: 54px;
    border-radius: calc(var(--radius) + 1px);
    background: rgba(95, 102, 115, 0.12);
}

.styleguide-preview-frame--components {
    align-content: center;
    justify-items: start;
}

.styleguide-demo-btn,
.styleguide-demo-pill {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding: 0 14px;
    border-radius: var(--radius);
    font-weight: 600;
}

.styleguide-demo-btn {
    background: var(--accent);
    color: var(--color-white);
    border: 1px solid var(--accent);
}

.styleguide-demo-btn--light {
    background: var(--color-white);
    color: var(--ink);
    border-color: var(--line);
}

.styleguide-demo-pill {
    border-radius: 999px;
    background: rgba(193, 98, 56, 0.16);
    color: var(--chip);
}

.styleguide-preview-form {
    display: grid;
    gap: 16px;
    padding: 18px;
    align-content: center;
}

.styleguide-preview-input {
    display: flex;
    align-items: center;
    min-height: 42px;
    padding: 0 14px;
    border-radius: var(--radius);
    border: 1px solid var(--line);
    background: var(--color-white);
    color: rgba(95, 102, 115, 0.78);
}

.styleguide-preview-toggle {
    width: 72px;
    padding: 3px;
    border-radius: 999px;
    background: rgba(89, 113, 177, 0.15);
}

.styleguide-preview-toggle span {
    display: block;
    width: 28px;
    height: 28px;
    border-radius: 999px;
    background: var(--accent);
    transform: translateX(38px);
}

.styleguide-signal-stack {
    display: grid;
    gap: 12px;
}

.styleguide-signal {
    display: block;
    height: 28px;
    border-radius: 999px;
}

.styleguide-signal--positive {
    background: var(--positive);
}

.styleguide-signal--warning {
    background: var(--ampel-warning);
}

.styleguide-signal--negative {
    background: var(--negative);
}

.styleguide-signal--neutral {
    background: var(--text-color);
}

.styleguide-chart-demo {
    display: grid;
    gap: 10px;
    align-content: end;
    padding: 18px;
}

.styleguide-chart-bar {
    border-radius: 999px;
    background: linear-gradient(90deg, var(--accent), var(--chip));
}

.styleguide-chart-bar--one {
    height: 22px;
    width: 66%;
}

.styleguide-chart-bar--two {
    height: 22px;
    width: 84%;
}

.styleguide-chart-bar--three {
    height: 22px;
    width: 48%;
}

.styleguide-page-recipe {
    display: grid;
    gap: 12px;
    padding: 18px;
}

.styleguide-page-recipe-head {
    min-height: 34px;
    border-radius: calc(var(--radius) + 1px);
    background: rgba(89, 113, 177, 0.22);
}

.styleguide-page-recipe-body {
    display: grid;
    gap: 12px;
    grid-template-columns: 1.1fr 1.1fr 0.8fr;
}

.styleguide-preview-label {
    color: rgba(95, 102, 115, 0.86);
}

.styleguide-token-segment-box {
    min-height: 64px;
    background: var(--standard-segment-box-colour);
    border: 0;
    border-radius: var(--segment-box-border-radius);
}

.styleguide-token-box {
    display: grid;
    gap: 0;
    min-height: 520px;
    background: var(--standard-content-box-color);
    border: 0;
    border-radius: var(--content-box-border-radius);
    box-shadow: var(--box-shadow);
    overflow: hidden;
}

.styleguide-preview-frame--box-token .styleguide-token-segment-box,
.styleguide-preview-frame--box-token .styleguide-token-box {
    flex: 1 1 auto;
    width: auto;
    margin: var(--styleguide-frame-gap-y) var(--styleguide-frame-gap-x) 0;
}

.styleguide-token-unit :is(.styleguide-token-box-menu, .styleguide-token-action) {
    border-radius: var(--button-radius);
}

.styleguide-token-unit {
    --segment-box-border-radius: 8px;
    --segment-box-padding-horizontal: 18px;
    --segment-box-padding-vertical: 10px;
    --segment-box-margin-horizontal: 18px;
    --segment-box-margin-vertical: 10px;
    --standard-segment-box-colour: var(--panel-blue-emphasis);
    --content-box-border-radius: var(--segment-box-border-radius);
    --content-box-padding-horizontal: var(--segment-box-padding-horizontal);
    --content-box-padding-vertical: var(--segment-box-padding-vertical);
    --content-box-margin-horizontal: var(--segment-box-margin-horizontal);
    --content-box-margin-vertical: var(--segment-box-margin-vertical);
    --button-radius: 4px;
    --standard-button-font-face: 600;
    --button-gap-horizontal: 10px;
    --button-flow-direction: row-reverse;
    --standard-button-disabled-colour: #8b95ab;
    --styleguide-frame-gap-x: var(--segment-box-margin-horizontal);
    --styleguide-frame-gap-y: var(--segment-box-margin-vertical);
}

.styleguide-token-box-head,
.styleguide-token-box-segment {
    padding: var(--content-box-padding-vertical) var(--content-box-padding-horizontal);
}

.styleguide-token-box-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding-top: 5px;
    min-height: 0;
    background: var(--standard-content-box-header-colour);
    color: var(--color-white);
}

.styleguide-token-box-menu {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    width: 28px;
    min-width: 28px;
    min-height: 28px;
    padding: 6px 3px;
    border: 0;
    background: var(--color-white);
    outline: 0;
    box-sizing: border-box;
}

.styleguide-token-box-menu span {
    display: block;
    width: 20px;
    height: 3px;
    border-radius: 0;
    background: var(--standard-button-disabled-colour);
}

.styleguide-token-box-segment {
    border-top: 1px solid var(--color-white);
}

.styleguide-token-box-segment--gray {
    background: var(--standard-content-box-color);
    color: var(--color-white);
}

.styleguide-token-box-segment--content {
    min-height: 140px;
    align-content: start;
}

.styleguide-token-box-segment--white {
    background: var(--standard-content-box-light-colour);
    color: var(--ink);
}

.styleguide-token-box-segment--content-lg {
    min-height: 220px;
    align-content: start;
}

.styleguide-token-box-meta {
    display: grid;
    gap: 4px;
}

.styleguide-token-box-meta strong,
.styleguide-token-box-meta span,
.styleguide-token-box-meta p {
    margin: 0;
    font-size: var(--font-size-text);
    line-height: var(--line-height-text);
}

.styleguide-token-box-kicker,
.styleguide-token-box-segment p {
    margin: 0;
}

.styleguide-token-box-kicker {
    font-size: var(--font-size-text);
    text-transform: none;
    letter-spacing: normal;
    opacity: 1;
}

.styleguide-token-box-action-row {
    width: 100%;
    display: flex;
    flex-direction: var(--button-flow-direction);
    justify-content: flex-end;
    gap: var(--button-gap-horizontal);
}

.styleguide-token-action {
    flex: 1 1 0;
    min-height: var(--btn-height);
    padding: var(--button-padding-vertical) var(--button-padding-horizontal);
    border: 0;
    background: #9aa3b8;
    color: var(--color-white);
    font-size: 0.95rem;
    font-weight: var(--standard-button-font-face);
    margin-block: var(--interactive-element-margin-block);
}

.styleguide-token-action--muted {
    background: #d8dde8;
    color: #8b95ab;
}

.styleguide-token-followups {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.styleguide-token-followup-card {
    display: grid;
    gap: 14px;
    padding: 18px;
    border: 1px solid rgba(89, 113, 177, 0.14);
    border-radius: calc(var(--radius) + 3px);
    background: var(--color-white);
}

.styleguide-token-followup-preview {
    min-height: 120px;
    border: 0;
    border-radius: 0;
    padding: 0;
}

.styleguide-token-followup-preview--menu {
    display: block;
    background: #373c4a;
}

.styleguide-token-followup-preview--actions {
    display: block;
    background: #373c4a;
}

.styleguide-token-followup-preview--menu .styleguide-token-box-menu {
    margin: var(--styleguide-frame-gap-y) var(--styleguide-frame-gap-x);
}

.styleguide-token-followup-preview--actions .styleguide-token-box-action-row {
    width: auto;
    margin: var(--styleguide-frame-gap-y) var(--styleguide-frame-gap-x);
}

.styleguide-type-label {
    color: var(--chip);
}

.styleguide-note {
    border-color: rgba(193, 98, 56, 0.2);
    background: rgba(193, 98, 56, 0.08);
}

@media (max-width: 1080px) {
    .styleguide-shell {
        grid-template-columns: minmax(0, 1fr);
    }

    .styleguide-sidebar {
        position: static;
        min-height: auto;
        padding-bottom: 0;
    }

    .styleguide-main {
        padding: 0 24px 32px;
    }

    .styleguide-hero,
    .styleguide-two-column {
        grid-template-columns: minmax(0, 1fr);
    }

    .public-home-page__cta-card-shell {
        margin-left: 0;
    }

    .public-home-page__cta-card-layout {
        grid-template-columns: minmax(0, 1fr);
        row-gap: var(--spacing-small);
    }

    .public-home-page__cta-card-action {
        align-items: flex-start;
    }

    .public-home-page__cta-card-label {
        text-align: left;
    }
}

@media (max-width: 760px) {
    .styleguide-sidebar,
    .styleguide-main {
        padding-left: 16px;
        padding-right: 16px;
    }

    .styleguide-sidebar-inner,
    .styleguide-hero,
    .styleguide-section {
        padding: 20px;
    }

    .styleguide-section-head {
        grid-template-columns: minmax(0, 1fr);
    }

    .styleguide-card-grid,
    .styleguide-placeholder-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .styleguide-page-recipe-body,
    .styleguide-wireframe-grid,
    .styleguide-preview-frame--palette,
    .styleguide-token-followups {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 640px) {
    #vsf-fundamental-tab-panel-2 .sg-data-table,
    #vsf-fundamental-tab-panel-3 .sg-data-table,
    #vsf-fundamental-tab-panel-4 .sg-data-table,
    #vsf-fundamental-tab-panel-5 .sg-data-table {
        table-layout: fixed;
    }

    #vsf-fundamental-tab-panel-2 .sg-data-table th:first-child,
    #vsf-fundamental-tab-panel-2 .sg-data-table td:first-child,
    #vsf-fundamental-tab-panel-3 .sg-data-table th:first-child,
    #vsf-fundamental-tab-panel-3 .sg-data-table td:first-child,
    #vsf-fundamental-tab-panel-4 .sg-data-table th:first-child,
    #vsf-fundamental-tab-panel-4 .sg-data-table td:first-child,
    #vsf-fundamental-tab-panel-5 .sg-data-table th:first-child,
    #vsf-fundamental-tab-panel-5 .sg-data-table td:first-child {
        width: 50%;
    }

    #vsf-fundamental-tab-panel-2 .sg-data-table th:nth-child(2),
    #vsf-fundamental-tab-panel-2 .sg-data-table td:nth-child(2),
    #vsf-fundamental-tab-panel-3 .sg-data-table th:nth-child(2),
    #vsf-fundamental-tab-panel-3 .sg-data-table td:nth-child(2),
    #vsf-fundamental-tab-panel-4 .sg-data-table th:nth-child(2),
    #vsf-fundamental-tab-panel-4 .sg-data-table td:nth-child(2),
    #vsf-fundamental-tab-panel-5 .sg-data-table th:nth-child(2),
    #vsf-fundamental-tab-panel-5 .sg-data-table td:nth-child(2),
    #vsf-fundamental-tab-panel-2 .sg-data-table th:nth-child(3),
    #vsf-fundamental-tab-panel-2 .sg-data-table td:nth-child(3),
    #vsf-fundamental-tab-panel-3 .sg-data-table th:nth-child(3),
    #vsf-fundamental-tab-panel-3 .sg-data-table td:nth-child(3),
    #vsf-fundamental-tab-panel-4 .sg-data-table th:nth-child(3),
    #vsf-fundamental-tab-panel-4 .sg-data-table td:nth-child(3),
    #vsf-fundamental-tab-panel-5 .sg-data-table th:nth-child(3),
    #vsf-fundamental-tab-panel-5 .sg-data-table td:nth-child(3) {
        width: 25%;
    }
}

.sg-portal-header__action-group {
    grid-area: menu;
    justify-self: end;
    display: flex;
    align-items: center;
    gap: var(--spacing-small);
    min-width: 0;
}

.sg-portal-header__locale-switch {
    flex: 0 0 auto;
}

.sg-portal-header__locale-switch [data-locale-active="true"] {
    background: var(--surface-tab-unselected);
    color: var(--text-tab-unselected);
}

.sg-portal-header__locale-switch [data-locale-active="false"] {
    background: var(--surface-tab-selected);
    color: var(--text-tab-selected);
}

.sg-score-state--warning {
    margin: 0;
    justify-self: end;
    text-align: right;
}

.sg-score-state--positive,
.sg-score-state--warning,
.sg-score-state--neutral,
.sg-score-state--negative {
    line-height: 1;
}

.sg-company-card__header-actions {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-large);
    flex: 0 0 auto;
}

.sg-company-card__header-star[hidden] {
    display: none !important;
}

button.sg-company-card__header-star {
    appearance: none;
    border: 0;
    padding: 0;
    display: inline-block;
    flex: 0 0 auto;
    inline-size: 1em;
    block-size: 1em;
    background: url("../assets/icons/star-filled-white.svg") no-repeat center / contain;
    cursor: pointer;
}

button.sg-company-card__header-star[data-company-star-selected="true"] {
    background-image: url("../assets/icons/star-filled-white.svg");
}

button.sg-company-card__header-star[data-company-star-selected="false"] {
    background-image: url("../assets/icons/star-outline.svg");
    filter: brightness(0) invert(1);
}

.sg-page-layout-public__footer-links {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
}

.sg-page-layout-public__footer-links .sg-hyperlink {
    display: inline-block;
}

.sg-delete-confirmation-pattern__list-button {
    display: grid;
    grid-template-columns: 1rem minmax(0, 1fr);
    column-gap: var(--spacing-small);
    height: auto;
    min-height: var(--interaction-height);
    align-items: center;
    text-align: left;
}

.sg-delete-confirmation-pattern__list-label {
    display: block;
    flex: 1 1 auto;
    min-width: 0;
    align-self: start;
}