/* ========================================================= */
/* 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-white: #FFFFFF;
  --color-process-inactive: #FFAE79;
  --color-signal-green: #009101;
  --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-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-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-light-grey);
  --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-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-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-menu-link-portal: var(--color-font-dark);
  --text-help-icon: var(--color-font-dark);
  --text-help-panel: var(--color-font-dark);
  --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-light-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);

  /* 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);
  --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);
  --surface-object-card-lower-segment: var(--color-white);
  --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);
  --layout-content-cards-group-gap: var(--spacing-small);
  --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);

  /* 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.5rem;
  --font-size-h2: 1.25rem;
  --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-input-label-width: 9rem;
  --dimension-input-field-desktop-width: 400px;
  --dimension-input-field-max-width: 600px;
  --dimension-search-field-width: 15.3rem;
  --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);
}

.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-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-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 {
      outline: none;
    }

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

    .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--process-inactive {
      background: var(--surface-button-process-inactive);
      color: var(--text-button-process);
    }

    .sg-button--inactive {
      background: var(--surface-button-inactive);
      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="tab-navigation"][data-component-size="large"] .sg-tab-button {
      padding-inline: var(--layout-tab-navigation-large-padding-inline);
    }

    .sg-tab-button[aria-selected="true"] {
      background: var(--surface-tab-selected);
      color: var(--text-tab-selected);
    }

    .sg-tab-button[aria-selected="false"] {
      background: var(--surface-tab-unselected);
      color: var(--text-tab-unselected);
    }

    .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 {
      text-align: left;
    }

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

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

    .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: var(--spacing-small);
      width: auto;
      max-width: none;
    }

    .sg-labeled-input-row .sg-label {
      min-width: var(--layout-input-label-width);
      flex: 0 0 var(--layout-input-label-width);
    }

    .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-input-field-max-width);
    }

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

    .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;
    }

    .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;
      }

      .sg-input-component .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;
      }

      .sg-labeled-input-row {
        flex-direction: column;
        align-items: flex-start;
        width: 100%;
        max-width: 100%;
      }

      .sg-labeled-input-row .sg-label {
        min-width: 0;
        flex: 0 0 auto;
      }

      .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:focus,
    .sg-mode-toggle:focus-visible {
      outline: none;
    }

    .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-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-slider-row {
      display: inline-flex;
      align-items: center;
      gap: var(--spacing-small);
    }

    .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 {
      width: var(--layout-input-field-desktop-width);
      min-width: var(--layout-input-field-desktop-width);
      max-width: var(--layout-input-field-desktop-width);
      height: var(--interaction-height);
      margin: 0;
      padding: 0;
      border: 0;
      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%;
      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 {
      min-width: calc(var(--interaction-height) * 1.25);
      text-align: right;
      color: var(--text-control-default);
    }

    @media (max-width: 48rem) {
      .sg-slider-row {
        flex-direction: column;
        align-items: flex-start;
        width: 100%;
        max-width: 100%;
      }

      .sg-slider-row .sg-label {
        min-width: 0;
        flex: 0 0 auto;
      }

      .sg-slider {
        min-width: 0;
        max-width: 100%;
        width: 100%;
      }

      .sg-slider-value {
        align-self: flex-end;
      }
    }

    .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 {
      width: calc(var(--sandwich-line-width) - 3px);
    }

    .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: 1;
    }

    .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 {
      text-decoration: none;
      white-space: nowrap;
    }

    .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;
    }

    .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: 2;
      display: none;
      width: var(--layout-help-panel-width);
      padding: var(--spacing-large);
      border-radius: var(--radius-card);
      color: var(--text-help-panel);
      background: var(--surface-help-panel);
      box-shadow: var(--shadow-overlay);
    }

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

    .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: 2;
      display: none;
      flex-direction: column;
      gap: var(--spacing-small);
      min-width: 100%;
      width: max-content;
      max-width: calc(100vw - (2 * var(--spacing-large)));
      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);
    }

    .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;
    }

    .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-control-default);
      color: var(--text-control-default);
      font-family: var(--font-family-base);
      font-size: var(--font-size-base);
      line-height: 1;
      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-panel__checkbox-list {
      margin-top: var(--spacing-large);
    }

    .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: center;
      padding-block: var(--interaction-padding-vertical);
      padding-inline: var(--layout-pulldown-option-padding-inline);
      border-radius: var(--radius-interaction);
      white-space: nowrap;
      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);
    }

    .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);
    }

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

    .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);
    }

    .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-active);
  --surface-tab-unselected: var(--surface-portal-header-tab);
  --text-tab-selected: var(--text-portal-header-tab-active);
  --text-tab-unselected: var(--text-portal-header-tab);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-large);
  padding:
    var(--card-segment-padding-vertical)
    var(--card-segment-padding-horizontal);
  border: var(--border-none);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-none);
  background: var(--surface-portal-header);
}

.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-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);
  }
}

/* ========================================================= */
/* 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(--card-segment-padding-horizontal);
  border: var(--border-none);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-none);
  background: var(--surface-options-row);
}

.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;
}

@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 > .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-input-single-line-wrap,
.sg-options-row__left > .sg-search-field-row {
  flex-basis: 100%;
  }

  .sg-options-row .sg-search-field-input {
    display: inline-flex;
    align-items: stretch;
  }

  .sg-options-row .sg-search-field-input .sg-input-single-line {
    padding-right: var(--interaction-padding-horizontal);
  }

  .sg-options-row .sg-search-field-input[data-has-value="true"] .sg-input-single-line {
    border-radius: var(--radius-interaction) 0 0 var(--radius-interaction);
  }

  .sg-options-row .sg-search-field-input .sg-input-clear-button {
    position: static;
    flex: 0 0 var(--interaction-height);
    height: auto;
    border-radius: 0 var(--radius-interaction) var(--radius-interaction) 0;
  }

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

}

/* ========================================================= */
/* 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__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;
}

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

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

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

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

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

.sg-form-sections-card {
  display: flex;
  flex-direction: column;
  width: clamp(
    var(--layout-object-card-max-width),
    65vw,
    calc(var(--layout-object-card-max-width) * 1.3)
  );
  max-width: 100%;
}

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

.sg-form-sections-card__body {
  background: var(--surface-form-preview);
  padding: var(--card-segment-padding-vertical) var(--card-segment-padding-horizontal);
}

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

.sg-form-sections-card__actions-segment {
  background: var(--surface-form-preview);
  padding: 0 var(--card-segment-padding-horizontal) var(--card-segment-padding-vertical);
}

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

.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__actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--spacing-small);
  width: 100%;
  margin-top: 0;
}

.sg-form-sections-card__action {
  width: 100%;
}

.sg-navigation-card-layout {
  width: 100%;
}

.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);
}

/* ========================================================= */
/* 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(--card-segment-padding-horizontal);
}

.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(--spacing-small)
    var(--card-segment-padding-vertical)
    var(--spacing-small);
}

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

.sg-card-list-page__title-row {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-small);
  padding-right: var(--card-segment-padding-horizontal);
  padding-left: var(--card-segment-padding-horizontal);
  width: fit-content;
  max-width: 100%;
}

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

.sg-card-list-page > .sg-card-list-page__intro-card {
  margin-top: calc(var(--spacing-large) - 0.5rem);
}

.sg-card-list-page__intro-card.sg-card {
  --layout-card-body-padding-top: 0;
  --layout-card-body-padding-bottom: 0;
  --surface-card-body: var(--surface-card-transparent);
  align-self: flex-start;
  width: min(60vw, 100%);
  max-width: 100%;
}

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

  .sg-card-list-page__intro-card.sg-card {
    align-self: stretch;
    width: 100%;
  }
}

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

/* ========================================================= */
/* 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__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;
}

/* ========================================================= */
/* 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);
}

@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--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--gray {
  background: var(--surface-card-body);
}

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

.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-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-transparent-card {
  color: var(--text-card-transparent);
  background: var(--surface-card-transparent);
  padding: 0;
}

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

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

.sg-score-bar-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-small);
  width: 100%;
}

.sg-score-bar-item {
  display: grid;
  grid-template-columns: var(--chart-axis-label-column-width) 1fr;
  gap: var(--spacing-small);
  align-items: center;
}

.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__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-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 {
  width: 100%;
  border-collapse: collapse;
  background: var(--surface-data-table);
  table-layout: fixed;
}

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

.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);
}

/* ========================================================= */
/* 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;
}