/* ScopeFold components, direction "Aushang".
   Requires tokens.css, glyphs.css and base.css (see base.css for the load order); scale.css
   where bars or range strips are drawn. Tokens only: no literal colours. Class prefix sf-.
   Every component documents anatomy, states, keyboard and accessible name in
   design/system/DESIGN_SYSTEM.md; the living specimen is design/system/specimen/index.html. */

@layer sf-reset, sf-base, sf-components, sf-utilities;

@layer sf-components {

  /* ================================================================ 1. Shell */

  .sf-app {
    display: grid;
    grid-template-rows: auto auto 1fr;
    min-block-size: 100dvh;
  }
  .sf-main { min-inline-size: 0; padding-block-end: var(--sf-space-12); }
  @media (max-width: 63.99em) {
    .sf-app--nav .sf-main {
      padding-block-end: calc(var(--sf-bottomnav) + var(--sf-space-16) + env(safe-area-inset-bottom, 0px));
    }
  }

  /* Top bar: paper strip across the case. Wordmark is plain type (no approved logo exists). */
  .sf-topbar {
    position: sticky;
    inset-block-start: 0;
    z-index: var(--sf-z-topbar);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sf-space-2);
    min-block-size: var(--sf-topbar);
    padding: var(--sf-space-2) var(--sf-gutter-phone);
    background: var(--sf-surface);
    border-block-end: var(--sf-border-hair) solid var(--sf-rule);
  }
  @media (min-width: 64em) {
    .sf-topbar { gap: var(--sf-space-4); padding: var(--sf-space-2) var(--sf-gutter-desk); }
  }
  .sf-wordmark {
    display: inline-flex;
    align-items: center;
    min-block-size: var(--sf-hit);
    color: var(--sf-ink);
    font-size: var(--sf-text-xl);
    font-stretch: var(--sf-width-condensed);
    font-weight: var(--sf-weight-heavy);
    line-height: 1;
    letter-spacing: 0.005em;
    text-decoration: none;
    white-space: nowrap;
  }
  .sf-topnav { display: none; }
  @media (min-width: 64em) {
    .sf-topnav { display: flex; align-self: stretch; gap: var(--sf-space-1); margin-block: calc(-1 * var(--sf-space-2)); }
  }
  .sf-topnav a {
    display: inline-flex;
    align-items: center;
    padding-inline: var(--sf-space-3);
    border-block: var(--sf-border-strong) solid transparent;
    color: var(--sf-ink-2);
    font-size: var(--sf-text-md);
    font-stretch: var(--sf-width-semi);
    font-weight: var(--sf-weight-medium);
    text-decoration: none;
  }
  .sf-topnav a:hover { color: var(--sf-ink); border-block-end-color: var(--sf-rule); }
  .sf-topnav a[aria-current="page"] {
    color: var(--sf-ink);
    font-weight: var(--sf-weight-bold);
    border-block-end-color: var(--sf-ink);
  }
  .sf-topbar__end { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sf-space-1); margin-inline-start: auto; }
  .sf-wsswitch {
    display: none;
    align-items: center;
    gap: var(--sf-space-2);
    min-block-size: var(--sf-hit);
    padding-inline: var(--sf-space-2);
    border: 0;
    border-radius: var(--sf-radius-plate);
    background: transparent;
    color: var(--sf-ink);
    font-size: var(--sf-text-md);
    font-weight: var(--sf-weight-medium);
  }
  .sf-wsswitch:hover { background: var(--sf-surface-2); color: var(--sf-ink); }
  @media (min-width: 64em) {
    .sf-wsswitch { display: inline-flex; }
  }
  .sf-cmdfield {
    display: none;
    align-items: center;
    gap: var(--sf-space-2);
    inline-size: 20rem;
    max-inline-size: 100%;
    min-block-size: var(--sf-hit);
    padding-inline: var(--sf-space-3);
    border: var(--sf-border-hair) solid var(--sf-control);
    border-radius: var(--sf-radius-plate);
    background: var(--sf-surface);
    color: var(--sf-ink-3);
    font-size: var(--sf-text-md);
    text-align: start;
  }
  .sf-cmdfield:hover { border-color: var(--sf-ink); color: var(--sf-ink-2); }
  .sf-cmdfield__text { flex: 1 1 auto; }
  .sf-cmdfield kbd { color: var(--sf-ink-2); }
  @media (min-width: 48em) {
    .sf-cmdfield { display: inline-flex; }
  }
  .sf-modestate {
    display: none;
    font-size: var(--sf-text-sm);
    font-stretch: var(--sf-width-semi);
    color: var(--sf-ink-2);
    white-space: nowrap;
  }
  .sf-modestate strong { color: var(--sf-ink); font-weight: var(--sf-weight-semibold); }
  @media (min-width: 80em) {
    .sf-modestate { display: inline; }
  }

  .sf-iconbtn {
    position: relative;
    display: inline-grid;
    place-items: center;
    inline-size: var(--sf-hit);
    block-size: var(--sf-hit);
    flex: none;
    padding: 0;
    border: 0;
    border-radius: var(--sf-radius-plate);
    background: transparent;
    color: var(--sf-ink);
    text-decoration: none;
  }
  .sf-iconbtn:hover { background: var(--sf-surface-2); color: var(--sf-ink); }
  .sf-iconbtn > .sf-glyph { inline-size: var(--sf-glyph-lg); block-size: var(--sf-glyph-lg); }
  .sf-badge {
    position: absolute;
    inset-block-start: 3px;
    inset-inline-end: 1px;
    display: inline-grid;
    place-items: center;
    min-inline-size: 1.5em;
    block-size: 1.5em;
    padding-inline: var(--sf-space-1);
    border-radius: var(--sf-radius-plate);
    background: var(--sf-action);
    color: var(--sf-on-action);
    font-size: var(--sf-text-xs);
    font-stretch: var(--sf-width-semi);
    font-weight: var(--sf-weight-bold);
    font-variant-numeric: tabular-nums;
    line-height: 1;
  }
  .sf-avatar {
    display: inline-grid;
    place-items: center;
    inline-size: 2rem;
    block-size: 2rem;
    border: var(--sf-border-hair) solid var(--sf-ink);
    border-radius: var(--sf-radius-plate);
    background: var(--sf-surface-2);
    color: var(--sf-ink);
    font-size: var(--sf-text-sm);
    font-stretch: var(--sf-width-semi);
    font-weight: var(--sf-weight-bold);
  }

  /* Case bar: the heading of the display case. Title condensed, stepper underneath. */
  .sf-casebar {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sf-space-2) var(--sf-space-6);
    padding: var(--sf-space-4) var(--sf-gutter-phone) 0;
  }
  @media (min-width: 64em) {
    .sf-casebar {
      grid-template-columns: minmax(0, 1fr) auto;
      grid-template-areas: "crumbs actions" "title actions" "steps steps";
      padding-inline: var(--sf-gutter-desk);
    }
    .sf-casebar > .sf-crumbs { grid-area: crumbs; }
    .sf-casebar__title { grid-area: title; }
    .sf-casebar__actions { grid-area: actions; align-self: end; }
    .sf-casebar > .sf-stepper { grid-area: steps; }
  }
  .sf-casebar__title {
    font-size: var(--sf-text-3xl);
    font-stretch: var(--sf-width-condensed);
    font-weight: var(--sf-weight-heavy);
    line-height: var(--sf-leading-tight);
    overflow-wrap: anywhere;
  }
  @media (min-width: 64em) {
    .sf-casebar__title { font-size: var(--sf-text-4xl); }
  }
  .sf-casebar__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sf-space-2); }
  @media (max-width: 37.49em) {
    .sf-casebar__actions .sf-plate--primary { display: none; }
  }
  .sf-crumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sf-space-1);
    margin: 0;
    padding: 0;
    list-style: none;
    color: var(--sf-text-2);
    font-size: var(--sf-text-sm);
    font-stretch: var(--sf-width-semi);
  }
  .sf-crumbs li { display: inline-flex; align-items: center; gap: var(--sf-space-1); }
  .sf-crumbs li + li::before {
    content: "";
    inline-size: 6px;
    block-size: 6px;
    margin-inline-end: var(--sf-space-1);
    border-block-start: 1.5px solid currentColor;
    border-inline-end: 1.5px solid currentColor;
    transform: rotate(45deg);
  }
  .sf-crumbs a { color: inherit; text-decoration: none; }
  .sf-crumbs a:hover { color: var(--sf-ink); text-decoration: underline; }

  /* Stepper: steps sit like column heads on a hairline; the current step carries an ink rule. */
  .sf-stepper {
    display: flex;
    flex-wrap: wrap;
    column-gap: var(--sf-space-6);
    margin: 0;
    padding: 0;
    list-style: none;
    border-block-start: var(--sf-border-hair) solid var(--sf-rule);
  }
  .sf-stepper__link {
    display: inline-flex;
    align-items: center;
    gap: var(--sf-space-2);
    min-block-size: var(--sf-hit);
    margin-block-start: calc(-1 * var(--sf-border-hair));
    border-block-start: var(--sf-border-strong) solid transparent;
    color: var(--sf-text-2);
    font-size: var(--sf-text-md);
    font-stretch: var(--sf-width-semi);
    font-weight: var(--sf-weight-medium);
    text-decoration: none;
    white-space: nowrap;
  }
  .sf-stepper__link:hover { color: var(--sf-ink); border-block-start-color: var(--sf-rule-strong); }
  .sf-stepper__no {
    font-stretch: var(--sf-width-condensed);
    font-weight: var(--sf-weight-heavy);
    font-variant-numeric: tabular-nums;
  }
  .sf-stepper__step--done .sf-stepper__link { color: var(--sf-ink-2); }
  .sf-stepper__step--done .sf-glyph { color: var(--sf-incl); }
  .sf-stepper__link[aria-current="step"] {
    color: var(--sf-ink);
    font-weight: var(--sf-weight-bold);
    border-block-start-color: var(--sf-ink);
  }
  .sf-count {
    display: inline-grid;
    place-items: center;
    min-inline-size: 1.85em;
    block-size: 1.7em;
    padding-inline: var(--sf-space-1);
    border: var(--sf-border-hair) solid currentColor;
    border-radius: var(--sf-radius-plate);
    font-size: var(--sf-text-xs);
    font-stretch: var(--sf-width-semi);
    font-weight: var(--sf-weight-bold);
    font-variant-numeric: tabular-nums;
    line-height: 1;
  }
  .sf-stepsum { display: none; }
  @media (max-width: 37.49em) {
    .sf-stepper { display: none; }
    .sf-stepsum {
      display: flex;
      align-items: center;
      gap: var(--sf-space-2);
      min-block-size: var(--sf-hit);
      padding-inline: var(--sf-gutter-phone);
      border-block-start: var(--sf-border-hair) solid var(--sf-rule);
      font-size: var(--sf-text-md);
      font-stretch: var(--sf-width-semi);
      font-weight: var(--sf-weight-semibold);
    }
  }

  /* Work area: sheet plus docked drawer from 1280 px; rail optional. */
  .sf-work {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sf-space-4);
    align-items: start;
    padding: var(--sf-space-4) var(--sf-gutter-phone) 0;
    max-inline-size: var(--sf-content-max);
  }
  @media (min-width: 64em) {
    .sf-work { padding-inline: var(--sf-gutter-desk); }
    .sf-work--rail { grid-template-columns: var(--sf-rail) minmax(0, 1fr); }
    .sf-work--rail-collapsed { grid-template-columns: var(--sf-rail-collapsed) minmax(0, 1fr); }
  }
  @media (min-width: 80em) {
    .sf-work--drawer { grid-template-columns: minmax(0, 1fr) var(--sf-drawer); }
    .sf-work--rail.sf-work--drawer { grid-template-columns: var(--sf-rail) minmax(0, 1fr) var(--sf-drawer); }
    .sf-work--rail-collapsed.sf-work--drawer { grid-template-columns: var(--sf-rail-collapsed) minmax(0, 1fr) var(--sf-drawer); }
  }

  /* Paper panel: forms, reading, settings. Paper never sits on paper. */
  .sf-panel {
    padding: var(--sf-space-4);
    background: var(--sf-surface);
    border: var(--sf-border-hair) solid var(--sf-rule);
    border-radius: var(--sf-radius-panel);
  }
  @media (min-width: 48em) {
    .sf-panel { padding: var(--sf-space-6); }
  }
  .sf-panel__title {
    margin-block-end: var(--sf-space-3);
    font-size: var(--sf-text-xl);
    font-stretch: var(--sf-width-condensed);
    font-weight: var(--sf-weight-bold);
  }
  .sf-section-title {
    margin-block: var(--sf-space-10) var(--sf-space-3);
    font-size: var(--sf-text-2xl);
    font-stretch: var(--sf-width-condensed);
    font-weight: var(--sf-weight-heavy);
  }

  /* ================================================================ 2. Plates (buttons) */

  .sf-plate {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sf-space-2);
    min-block-size: var(--sf-hit);
    padding: var(--sf-space-2) var(--sf-space-4);
    border: var(--sf-border-hair) solid transparent;
    border-radius: var(--sf-radius-plate);
    background: transparent;
    color: var(--sf-ink);
    font-size: var(--sf-text-base);
    font-stretch: var(--sf-width-semi);
    font-weight: var(--sf-weight-semibold);
    line-height: 1.15;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    touch-action: manipulation;
    transition:
      background-color var(--sf-dur-state) var(--sf-ease-out),
      border-color var(--sf-dur-state) var(--sf-ease-out),
      color var(--sf-dur-state) var(--sf-ease-out),
      transform var(--sf-dur-press) var(--sf-ease-out);
  }
  .sf-plate:active { transform: translateY(1px); }
  .sf-plate > .sf-glyph { color: currentColor; }
  .sf-plate__count { font-variant-numeric: tabular-nums; }
  .sf-plate kbd { margin-inline-start: var(--sf-space-1); }

  .sf-plate--primary { background: var(--sf-action); color: var(--sf-on-action); border-color: var(--sf-action); }
  .sf-plate--primary:hover { background: var(--sf-action-hover); border-color: var(--sf-action-hover); color: var(--sf-on-action); }
  .sf-plate--secondary { background: var(--sf-surface); color: var(--sf-ink); border-color: var(--sf-control); }
  .sf-plate--secondary:hover { background: var(--sf-surface-2); border-color: var(--sf-ink); color: var(--sf-ink); }
  .sf-plate--quiet {
    padding-inline: var(--sf-space-2);
    color: var(--sf-ink);
    text-decoration-line: underline;
    text-decoration-color: transparent;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.25em;
  }
  .sf-plate--quiet:hover { text-decoration-color: currentColor; }
  .sf-plate--danger { background: var(--sf-excl); color: var(--sf-on-excl); border-color: var(--sf-excl); }
  .sf-plate--danger:hover {
    color: var(--sf-on-excl);
    background: color-mix(in srgb, var(--sf-excl) 86%, var(--sf-ink));
    border-color: color-mix(in srgb, var(--sf-excl) 86%, var(--sf-ink));
  }
  .sf-plate--block { inline-size: 100%; }
  .sf-plate--lg { min-block-size: var(--sf-target-phone); padding-inline: var(--sf-space-6); font-size: var(--sf-text-lg); }
  @media (pointer: fine) {
    .sf-plate--sm { min-block-size: var(--sf-target-dense); padding: var(--sf-space-1) var(--sf-space-3); font-size: var(--sf-text-md); }
  }
  .sf-plate:disabled,
  .sf-plate[aria-disabled="true"] {
    background: var(--sf-surface-2);
    color: var(--sf-ink-3);
    border: var(--sf-border-hair) dashed var(--sf-control);
    cursor: not-allowed;
    transform: none;
  }
  .sf-plate[aria-busy="true"] { cursor: progress; }
  .sf-plate[aria-busy="true"] > .sf-glyph--sync { animation: sf-turn 1.2s linear infinite; }
  .sf-plate-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sf-space-2); }
  .sf-plate-row__reason { color: var(--sf-text-2); font-size: var(--sf-text-sm); }
  @keyframes sf-turn { to { transform: rotate(1turn); } }
  @media (prefers-reduced-motion: reduce) {
    .sf-plate[aria-busy="true"] > .sf-glyph--sync { animation: none; }
  }

  /* ================================================================ 3. Fields */

  .sf-field { display: grid; gap: var(--sf-space-1); align-content: start; }
  .sf-field__label {
    color: var(--sf-ink);
    font-size: var(--sf-text-md);
    font-stretch: var(--sf-width-semi);
    font-weight: var(--sf-weight-semibold);
  }
  .sf-field__opt { color: var(--sf-text-2); font-weight: var(--sf-weight-regular); }
  .sf-field__hint { color: var(--sf-text-3); font-size: var(--sf-text-sm); }
  .sf-field__error {
    display: flex;
    align-items: flex-start;
    gap: var(--sf-space-2);
    color: var(--sf-excl);
    font-size: var(--sf-text-sm);
    font-weight: var(--sf-weight-medium);
  }
  .sf-field__error > .sf-glyph { margin-block-start: var(--sf-space-0-5); }

  .sf-input,
  .sf-textarea,
  .sf-select > select {
    inline-size: 100%;
    min-block-size: var(--sf-hit);
    padding: var(--sf-space-2) var(--sf-space-3);
    border: var(--sf-border-hair) solid var(--sf-control);
    border-radius: var(--sf-radius-plate);
    background: var(--sf-surface);
    color: var(--sf-ink);
    font-size: var(--sf-text-base);
    line-height: var(--sf-leading-snug);
    transition: border-color var(--sf-dur-state) var(--sf-ease-out);
  }
  .sf-textarea { min-block-size: 6.5rem; resize: vertical; line-height: var(--sf-leading-body); }
  .sf-input::placeholder, .sf-textarea::placeholder { color: var(--sf-ink-3); opacity: 1; }
  .sf-input:hover, .sf-textarea:hover, .sf-select > select:hover { border-color: var(--sf-ink-2); }
  .sf-input:focus-visible, .sf-textarea:focus-visible, .sf-select > select:focus-visible { border-color: var(--sf-ink); }
  .sf-input[aria-invalid="true"], .sf-textarea[aria-invalid="true"], .sf-select > select[aria-invalid="true"] {
    border: var(--sf-border-strong) solid var(--sf-excl);
    padding-inline: calc(var(--sf-space-3) - 1px);
  }
  .sf-input:disabled, .sf-textarea:disabled, .sf-select > select:disabled {
    background: var(--sf-surface-2);
    color: var(--sf-ink-3);
    border-style: dashed;
  }
  .sf-input[readonly], .sf-textarea[readonly] { background: var(--sf-surface-2); border-color: var(--sf-rule); }
  .sf-input--num { text-align: end; font-variant-numeric: tabular-nums; }
  .sf-inputgroup { display: flex; align-items: stretch; }
  .sf-inputgroup > .sf-input { border-start-end-radius: 0; border-end-end-radius: 0; }
  .sf-inputgroup__unit {
    display: inline-flex;
    align-items: center;
    padding-inline: var(--sf-space-3);
    border: var(--sf-border-hair) solid var(--sf-control);
    border-inline-start: 0;
    border-start-end-radius: var(--sf-radius-plate);
    border-end-end-radius: var(--sf-radius-plate);
    background: var(--sf-surface-2);
    color: var(--sf-ink-2);
    font-size: var(--sf-text-md);
    font-stretch: var(--sf-width-semi);
  }
  .sf-select { position: relative; display: block; }
  .sf-select > select { appearance: none; padding-inline-end: var(--sf-space-10); cursor: pointer; }
  .sf-select::after {
    content: "";
    position: absolute;
    inset-inline-end: var(--sf-space-4);
    inset-block-start: 50%;
    inline-size: 7px;
    block-size: 7px;
    margin-block-start: calc(-1 * var(--sf-space-1-5));
    border-block-end: 2px solid var(--sf-ink);
    border-inline-end: 2px solid var(--sf-ink);
    transform: rotate(45deg);
    pointer-events: none;
  }

  /* Checkbox, radio, switch: native inputs, drawn in the plate language. */
  .sf-check, .sf-radio, .sf-switchrow {
    display: inline-flex;
    align-items: flex-start;
    gap: var(--sf-space-3);
    min-block-size: var(--sf-hit);
    padding-block: calc((var(--sf-hit) - 24px) / 2);
    cursor: pointer;
    color: var(--sf-ink);
  }
  .sf-check > input, .sf-radio > input {
    appearance: none;
    display: inline-grid;
    place-content: center;
    flex: none;
    inline-size: 22px;
    block-size: 22px;
    margin: var(--sf-space-0-5) 0 0;
    border: var(--sf-border-strong) solid var(--sf-control);
    background: var(--sf-surface);
    cursor: pointer;
    transition: background-color var(--sf-dur-state) var(--sf-ease-out), border-color var(--sf-dur-state) var(--sf-ease-out);
  }
  .sf-check > input { border-radius: var(--sf-radius-plate); }
  .sf-radio > input { border-radius: 50%; }
  .sf-check > input:hover, .sf-radio > input:hover { border-color: var(--sf-ink); }
  .sf-check > input::before {
    content: "";
    inline-size: 6px;
    block-size: 11px;
    margin-block-start: calc(-1 * var(--sf-space-1));
    border-inline-end: 2.5px solid var(--sf-on-action);
    border-block-end: 2.5px solid var(--sf-on-action);
    transform: rotate(45deg) scale(0);
    transition: transform var(--sf-dur-press) var(--sf-ease-out);
  }
  .sf-check > input:checked, .sf-check > input:indeterminate { background: var(--sf-action); border-color: var(--sf-action); }
  .sf-check > input:checked::before { transform: rotate(45deg) scale(1); }
  .sf-check > input:indeterminate::before {
    inline-size: 10px;
    block-size: 0;
    margin: 0;
    border-inline-end: 0;
    transform: none;
  }
  .sf-radio > input::before {
    content: "";
    inline-size: 10px;
    block-size: 10px;
    border-radius: 50%;
    background: var(--sf-action);
    transform: scale(0);
    transition: transform var(--sf-dur-press) var(--sf-ease-out);
  }
  .sf-radio > input:checked { border-color: var(--sf-action); }
  .sf-radio > input:checked::before { transform: scale(1); }
  .sf-check > input:disabled, .sf-radio > input:disabled { background: var(--sf-surface-2); border-style: dashed; }
  .sf-check__text, .sf-radio__text { display: grid; gap: var(--sf-space-0-5); padding-block-start: var(--sf-space-0-5); }
  .sf-check__hint, .sf-radio__hint { color: var(--sf-text-2); font-size: var(--sf-text-sm); }

  .sf-switch {
    appearance: none;
    position: relative;
    flex: none;
    inline-size: 46px;
    block-size: 26px;
    margin: 0;
    border: var(--sf-border-strong) solid var(--sf-control);
    border-radius: var(--sf-radius-plate);
    background: var(--sf-surface);
    cursor: pointer;
    transition: background-color var(--sf-dur-state) var(--sf-ease-out), border-color var(--sf-dur-state) var(--sf-ease-out);
  }
  .sf-switch::before {
    content: "";
    position: absolute;
    inset-block-start: 2px;
    inset-inline-start: 2px;
    inline-size: 18px;
    block-size: 18px;
    border-radius: 1px;
    background: var(--sf-control);
    transition: transform var(--sf-dur-state) var(--sf-ease-out), background-color var(--sf-dur-state) var(--sf-ease-out);
  }
  .sf-switch:checked { background: var(--sf-action); border-color: var(--sf-action); }
  .sf-switch:checked::before { background: var(--sf-on-action); transform: translateX(20px); }
  .sf-switchrow__state { min-inline-size: 2.2em; color: var(--sf-ink); font-weight: var(--sf-weight-semibold); }
  .sf-switch:checked ~ .sf-switchrow__state .sf-switchrow__off,
  .sf-switch:not(:checked) ~ .sf-switchrow__state .sf-switchrow__on { display: none; }
  .sf-switchrow__label { flex: 1 1 auto; }

  /* Segmented choice (Prüfungen: Aus, Cloud; offer picker): radios drawn as joined plates. */
  .sf-seg { display: inline-flex; flex-wrap: wrap; }
  .sf-seg > label { position: relative; display: inline-flex; }
  .sf-seg input { position: absolute; opacity: 0; inline-size: 1px; block-size: 1px; }
  .sf-seg span {
    display: inline-flex;
    align-items: center;
    gap: var(--sf-space-2);
    min-block-size: var(--sf-hit);
    padding-inline: var(--sf-space-4);
    border: var(--sf-border-hair) solid var(--sf-control);
    margin-inline-start: calc(-1 * var(--sf-border-hair));
    background: var(--sf-surface);
    color: var(--sf-ink);
    font-size: var(--sf-text-md);
    font-stretch: var(--sf-width-semi);
    font-weight: var(--sf-weight-semibold);
    cursor: pointer;
  }
  .sf-seg > label:first-child span { margin-inline-start: 0; border-start-start-radius: var(--sf-radius-plate); border-end-start-radius: var(--sf-radius-plate); }
  .sf-seg > label:last-child span { border-start-end-radius: var(--sf-radius-plate); border-end-end-radius: var(--sf-radius-plate); }
  .sf-seg span:hover { background: var(--sf-surface-2); color: var(--sf-ink); }
  .sf-seg input:checked + span { position: relative; z-index: 1; background: var(--sf-action); border-color: var(--sf-action); color: var(--sf-on-action); }
  .sf-seg input:focus-visible + span { outline: var(--sf-focus-width) solid var(--sf-focus); outline-offset: var(--sf-focus-offset); z-index: 2; }

  /* ================================================================ 4. State words, chips, bands */

  .sf-state {
    display: inline-flex;
    align-items: center;
    gap: var(--sf-space-1-5);
    color: var(--sf-ink);
    font-weight: var(--sf-weight-medium);
    white-space: nowrap;
  }
  .sf-state > .sf-glyph, .sf-chip > .sf-glyph { color: var(--sf-state-mark, currentColor); }
  .sf-state--incl, .sf-chip--incl, .sf-cell--incl { --sf-state-mark: var(--sf-incl); }
  .sf-state--excl, .sf-chip--excl, .sf-cell--excl { --sf-state-mark: var(--sf-excl); }
  .sf-state--nstat, .sf-chip--nstat, .sf-cell--nstat { --sf-state-mark: var(--sf-nstat-mark); }
  .sf-state--uncl, .sf-chip--uncl, .sf-cell--uncl { --sf-state-mark: var(--sf-uncl); }
  .sf-state--missing, .sf-chip--missing, .sf-cell--missing { --sf-state-mark: var(--sf-text-2); }

  .sf-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--sf-space-1-5);
    min-block-size: 1.75rem;
    padding: var(--sf-space-0-5) var(--sf-space-3) var(--sf-space-0-5) var(--sf-space-2);
    border-radius: var(--sf-radius-plate);
    background: var(--sf-chip-ground, var(--sf-surface-2));
    color: var(--sf-ink);
    font-size: var(--sf-text-sm);
    font-stretch: var(--sf-width-semi);
    font-weight: var(--sf-weight-semibold);
    line-height: 1.2;
    white-space: nowrap;
  }
  .sf-chip--incl { --sf-chip-ground: var(--sf-incl-tint); }
  .sf-chip--excl { --sf-chip-ground: var(--sf-excl-tint); }
  .sf-chip--nstat { --sf-chip-ground: var(--sf-nstat-tint); --sf-state-mark: var(--sf-nstat); }
  .sf-chip--uncl { --sf-chip-ground: var(--sf-uncl-tint); }
  .sf-chip--warn { --sf-chip-ground: var(--sf-warn-tint); --sf-state-mark: var(--sf-warn); }
  .sf-chip--info { --sf-chip-ground: var(--sf-info-tint); --sf-state-mark: var(--sf-info); }
  .sf-chip--outline { --sf-chip-ground: transparent; box-shadow: inset 0 0 0 1px var(--sf-control); }

  /* Band of a suggestion (Sicher, Prüfen, Offen): a printed tag, never a score. */
  .sf-bandtag {
    display: inline-flex;
    align-items: center;
    min-block-size: 1.4rem;
    padding: var(--sf-space-0-5) var(--sf-space-2);
    border: var(--sf-border-hair) solid var(--sf-ink);
    border-radius: var(--sf-radius-plate);
    color: var(--sf-ink);
    font-size: var(--sf-text-xs);
    font-stretch: var(--sf-width-semi);
    font-weight: var(--sf-weight-semibold);
  }
  .sf-bandtag--sure { border-width: var(--sf-border-strong); }
  .sf-bandtag--open { border-style: dashed; }

  /* ================================================================ 5. Letter plate, base tag, stamp */

  .sf-letter {
    display: inline-grid;
    place-items: center;
    flex: none;
    inline-size: var(--sf-plate-letter);
    block-size: var(--sf-plate-letter);
    border-radius: var(--sf-radius-plate);
    background: var(--sf-action);
    color: var(--sf-on-action);
    font-size: var(--sf-text-base);
    font-stretch: var(--sf-width-condensed);
    font-weight: var(--sf-weight-heavy);
    line-height: 1;
  }
  .sf-letter--lg { inline-size: var(--sf-plate-letter-lg); block-size: var(--sf-plate-letter-lg); font-size: var(--sf-text-xl); }
  .sf-letter--sm { inline-size: 1.25rem; block-size: 1.25rem; font-size: var(--sf-text-sm); }

  .sf-basetag {
    display: inline-flex;
    align-items: center;
    min-block-size: var(--sf-plate-letter);
    padding-inline: var(--sf-space-2);
    border: var(--sf-border-hair) solid var(--sf-ink);
    border-radius: var(--sf-radius-plate);
    color: var(--sf-ink);
    font-size: var(--sf-text-sm);
    font-stretch: var(--sf-width-semi);
    font-weight: var(--sf-weight-bold);
    line-height: 1;
  }

  /* Stamp ("Stand"): the validity line of the sheet, set like a rubber stamp, never rotated. */
  .sf-stamp {
    display: inline-grid;
    grid-template-columns: auto auto;
    align-items: center;
    column-gap: var(--sf-space-3);
    padding: var(--sf-space-1) var(--sf-space-3);
    border: var(--sf-border-strong) solid var(--sf-ink);
    border-radius: var(--sf-radius-plate);
    background: transparent;
    color: var(--sf-ink);
    text-align: start;
    text-decoration: none;
    line-height: 1.2;
  }
  .sf-stamp__label {
    grid-row: span 2;
    font-size: var(--sf-text-md);
    font-stretch: var(--sf-width-condensed);
    font-weight: var(--sf-weight-heavy);
  }
  .sf-stamp__date {
    font-size: var(--sf-text-md);
    font-stretch: var(--sf-width-semi);
    font-weight: var(--sf-weight-bold);
    font-variant-numeric: tabular-nums;
  }
  .sf-stamp__ver {
    color: var(--sf-text-2);
    font-size: var(--sf-text-xs);
    font-stretch: var(--sf-width-semi);
    font-weight: var(--sf-weight-medium);
    font-variant-numeric: tabular-nums;
  }
  button.sf-stamp, a.sf-stamp { min-block-size: var(--sf-hit); cursor: pointer; }
  button.sf-stamp:hover, a.sf-stamp:hover { background: var(--sf-sheet-band); color: var(--sf-ink); }
  .sf-stamp--past { border-style: dashed; }

  /* ================================================================ 6. Legend strip (Zeichenerklärung) */

  .sf-legend {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sf-space-1) var(--sf-space-5);
    margin: 0;
    padding: var(--sf-space-2) var(--sf-space-5);
    border-block-end: var(--sf-border-hair) solid var(--sf-rule-soft);
    color: var(--sf-ink);
    font-size: var(--sf-text-sm);
    font-stretch: var(--sf-width-semi);
  }
  .sf-legend__title { margin-inline-end: var(--sf-space-1); font-weight: var(--sf-weight-bold); }
  .sf-legend__list { display: flex; flex: 1 1 24rem; flex-wrap: wrap; align-items: center; gap: var(--sf-space-1) var(--sf-space-4); margin: 0; }
  .sf-legend__item { display: inline-flex; align-items: center; gap: var(--sf-space-1-5); min-block-size: 1.5rem; }
  .sf-legend__item dt { display: inline-flex; align-items: center; }
  .sf-legend__item dd { margin: 0; }
  .sf-legend__item .sf-glyph { color: var(--sf-state-mark, currentColor); }
  .sf-legend .sf-fn { vertical-align: baseline; }
  /* A corner mark is shown inside a miniature cell corner so its position reads in the key. */
  .sf-legend__corner {
    position: relative;
    display: inline-block;
    inline-size: 1.125rem;
    block-size: 1.125rem;
    border-block-start: var(--sf-border-hair) solid var(--sf-rule-strong);
    border-inline-end: var(--sf-border-hair) solid var(--sf-rule-strong);
  }
  .sf-legend__corner > .sf-glyph { position: absolute; inset-block-start: 0; inset-inline-end: 0; }

  /* ================================================================ 7. The sheet (Scope Map, Preisspiegel) */

  .sf-sheet {
    --sf-text-2: var(--sf-sheet-ink-2);
    --sf-text-3: var(--sf-sheet-ink-2);
    --sf-rule-soft: var(--sf-sheet-rule);
    --sf-nstat-mark: var(--sf-sheet-ink-2);
    container: sf-sheet / inline-size;
    position: relative;
    min-inline-size: 0;
    background: var(--sf-sheet);
    color: var(--sf-ink);
    border-block-start: var(--sf-border-strong) solid var(--sf-rule-strong);
  }
  .sf-sheet__head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--sf-space-3) var(--sf-space-6);
    padding: var(--sf-space-4) var(--sf-space-4) var(--sf-space-3);
    border-block-end: var(--sf-border-hair) solid var(--sf-rule-strong);
  }
  @media (min-width: 48em) {
    .sf-sheet__head { padding-inline: var(--sf-space-5); }
  }
  .sf-sheet__title {
    font-size: var(--sf-text-3xl);
    font-stretch: var(--sf-width-condensed);
    font-weight: var(--sf-weight-heavy);
    line-height: var(--sf-leading-tight);
    letter-spacing: -0.005em;
  }
  @media (min-width: 64em) {
    .sf-sheet__title { font-size: var(--sf-text-4xl); }
  }
  .sf-sheet__meta {
    margin-block-start: var(--sf-space-1);
    color: var(--sf-text-2);
    font-size: var(--sf-text-sm);
    font-stretch: var(--sf-width-semi);
    font-weight: var(--sf-weight-medium);
  }
  .sf-sheet__scroll {
    position: relative;
    overflow: auto;
    max-block-size: var(--sf-sheet-max, none);
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--sf-sheet-ink-2) transparent;
  }
  .sf-sheet__scroll:focus-visible { outline-offset: calc(-1 * var(--sf-focus-width)); }
  .sf-sheet__foot {
    padding: var(--sf-space-3) var(--sf-space-4);
    border-block-start: var(--sf-border-hair) solid var(--sf-rule-strong);
    color: var(--sf-text-2);
    font-size: var(--sf-text-sm);
    font-stretch: var(--sf-width-semi);
  }
  @media (min-width: 48em) {
    .sf-sheet__foot { padding-inline: var(--sf-space-5); }
  }

  /* The grid: real table semantics. Sticky head, pinned requirement column, sticky ledger foot. */
  .sf-grid {
    inline-size: 100%;
    min-inline-size: calc(var(--sf-req-col) + var(--sf-grid-cols, 4) * var(--sf-offer-col));
    border-collapse: separate;
    border-spacing: 0;
    table-layout: fixed;
    font-size: var(--sf-text-md);
    font-stretch: var(--sf-cell-width, var(--sf-width-semi));
    line-height: var(--sf-leading-dense);
  }
  .sf-grid--cols-2 { --sf-grid-cols: 2; }
  .sf-grid--cols-3 { --sf-grid-cols: 3; }
  .sf-grid--cols-4 { --sf-grid-cols: 4; }
  .sf-grid--cols-5 { --sf-grid-cols: 5; }
  .sf-grid--cols-6 { --sf-grid-cols: 6; }
  .sf-grid__reqcol { inline-size: var(--sf-req-col); }
  .sf-grid th, .sf-grid td {
    padding: 0;
    border-block-end: var(--sf-border-hair) solid var(--sf-sheet-rule);
    background: var(--sf-sheet);
    vertical-align: top;
    text-align: start;
  }
  .sf-grid thead { position: sticky; inset-block-start: 0; z-index: 3; }
  .sf-grid thead th {
    padding: var(--sf-space-2) var(--sf-space-3) var(--sf-space-3);
    border-block-end: var(--sf-border-strong) solid var(--sf-rule-strong);
    vertical-align: bottom;
    font-weight: var(--sf-weight-semibold);
  }
  .sf-grid tbody th[scope="row"],
  .sf-grid thead th:first-child,
  .sf-grid tfoot th[scope="row"] {
    position: sticky;
    inset-inline-start: 0;
    z-index: 2;
    border-inline-end: var(--sf-border-hair) solid var(--sf-rule-strong);
  }
  .sf-grid thead th:first-child { z-index: 4; }
  .sf-grid tbody th[scope="row"] {
    padding: var(--sf-space-3);
    font-weight: var(--sf-weight-semibold);
    overflow-wrap: anywhere;
  }
  .sf-grid__corner { color: var(--sf-text-2); font-size: var(--sf-text-sm); }
  .sf-grid__req-note {
    display: block;
    margin-block-start: var(--sf-space-0-5);
    color: var(--sf-text-2);
    font-size: var(--sf-text-sm);
    font-weight: var(--sf-weight-medium);
  }
  .sf-grid__addr {
    float: inline-end;
    margin-inline-start: var(--sf-space-2);
    color: var(--sf-text-2);
    font-size: var(--sf-text-xs);
    font-weight: var(--sf-weight-medium);
    font-variant-numeric: tabular-nums;
  }

  /* Column head: letter plate, supplier, version; risk tabs ride on top (last in the DOM). */
  .sf-grid__head { display: flex; flex-direction: column; gap: var(--sf-space-0-5); }
  .sf-grid__offer { display: flex; align-items: center; gap: var(--sf-space-2); }
  .sf-grid__name {
    font-size: var(--sf-text-base);
    font-stretch: var(--sf-width-condensed);
    font-weight: var(--sf-weight-bold);
    line-height: var(--sf-leading-snug);
  }
  .sf-grid__sub {
    color: var(--sf-text-2);
    font-size: var(--sf-text-xs);
    font-weight: var(--sf-weight-medium);
    font-variant-numeric: tabular-nums;
  }
  .sf-grid__risks { order: -1; display: flex; flex-wrap: wrap; gap: var(--sf-space-1); min-block-size: 1.625rem; margin-block-end: var(--sf-space-1); }

  /* Today's contract (Bestandsvertrag): grey case colour, never part of the decision. */
  .sf-grid .sf-grid__base {
    --sf-text-2: var(--sf-ink-2);
    --sf-nstat-mark: var(--sf-nstat);
    background: var(--sf-ground);
  }

  /* Group band (Leistung, Material, Kaufmännisch) */
  .sf-grid__group th {
    padding: var(--sf-space-1) var(--sf-space-3);
    border-block-end: var(--sf-border-hair) solid var(--sf-rule-strong);
    background: var(--sf-sheet-band);
    font-size: var(--sf-text-sm);
    font-stretch: var(--sf-width-condensed);
    font-weight: var(--sf-weight-heavy);
    letter-spacing: 0.01em;
  }
  .sf-grid__group th > span { position: sticky; inset-inline-start: var(--sf-space-3); }

  /* Cell: a button over the whole cell. Glyph + word always; footnote mark; corner mark. */
  .sf-cell { position: relative; }
  .sf-cell__btn {
    position: relative;
    isolation: isolate;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    align-content: flex-start;
    gap: var(--sf-space-0-5) var(--sf-space-2);
    inline-size: 100%;
    min-block-size: var(--sf-row);
    padding: var(--sf-space-3) var(--sf-space-6) var(--sf-space-3) var(--sf-space-3);
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: start;
    cursor: pointer;
  }
  .sf-cell__btn::before {
    content: "";
    position: absolute;
    inset: 4px;
    z-index: -1;
    border: var(--sf-border-hair) solid transparent;
    border-radius: 1px;
    transition: background-color var(--sf-dur-state) var(--sf-ease-out), border-color var(--sf-dur-state) var(--sf-ease-out);
  }
  .sf-cell__btn:hover::before { background: var(--sf-sheet-band); }
  .sf-cell__btn:focus-visible { outline-offset: -3px; }
  .sf-cell__mark { color: var(--sf-state-mark, currentColor); }
  .sf-cell__word { font-weight: var(--sf-weight-semibold); }
  .sf-cell__detail { color: var(--sf-text-2); font-weight: var(--sf-weight-medium); }
  .sf-cell__value { font-weight: var(--sf-weight-semibold); font-variant-numeric: tabular-nums; }
  /* The corner glyph draws its triangle in the top-right quarter of its own 16 px box. */
  .sf-cell__corner {
    position: absolute;
    inset-block-start: 1px;
    inset-inline-end: 1px;
    inline-size: var(--sf-glyph);
    block-size: var(--sf-glyph);
    color: var(--sf-ink);
  }
  .sf-cell__dev {
    display: flex;
    align-items: center;
    gap: var(--sf-space-1);
    flex-basis: 100%;
    color: var(--sf-text-2);
    font-size: var(--sf-text-xs);
    font-weight: var(--sf-weight-semibold);
  }
  .sf-cell__dev > .sf-glyph { inline-size: 12px; block-size: 12px; color: var(--sf-ink); }

  /* Slips: a suggestion still to check is taken off the print onto a white slip. */
  .sf-cell--check .sf-cell__btn::before,
  .sf-cell--open .sf-cell__btn::before { background: var(--sf-sheet-select); border-color: var(--sf-rule-strong); }
  .sf-cell--open .sf-cell__btn::before { border-style: dashed; }
  .sf-cell--check .sf-cell__btn:hover::before,
  .sf-cell--open .sf-cell__btn:hover::before { background: var(--sf-sheet-select); border-color: var(--sf-ink); }
  .sf-cell--check, .sf-cell--open { --sf-text-2: var(--sf-sheet-ink-2); }
  /* Selected cell: the slip in hand, framed with the strong rule. */
  .sf-cell.is-selected .sf-cell__btn::before,
  .sf-cell[aria-selected="true"] .sf-cell__btn::before,
  .sf-cell__btn[aria-current="true"]::before {
    background: var(--sf-sheet-select);
    border: var(--sf-border-strong) solid var(--sf-ink);
    inset: 3px;
  }
  /* Changed after a revision: stays marked until a person has seen it. */
  .sf-cell--changed .sf-cell__word::after {
    content: "geändert";
    margin-inline-start: var(--sf-space-2);
    padding: 0 var(--sf-space-1);
    border: var(--sf-border-hair) solid var(--sf-ink);
    border-radius: var(--sf-radius-plate);
    font-size: var(--sf-text-xs);
    font-weight: var(--sf-weight-semibold);
  }
  /* Live fill: cells ink in, in reading order, as results arrive (no motion when reduced). */
  .sf-cell--arriving .sf-cell__btn > * { animation: sf-ink-in var(--sf-dur-state) var(--sf-ease-out) both; }
  @keyframes sf-ink-in { from { opacity: 0; } to { opacity: 1; } }
  .sf-cell--pending .sf-cell__btn { cursor: default; color: var(--sf-text-2); }

  /* Footnote mark: the letter that points to the source passage (Beleg). */
  .sf-fn {
    display: inline;
    margin-inline-start: var(--sf-space-0-5);
    color: var(--sf-text-2);
    font-size: var(--sf-text-xs);
    font-stretch: var(--sf-width-semi);
    font-weight: var(--sf-weight-bold);
    font-style: normal;
    line-height: 1;
    vertical-align: 0.45em;
  }
  .sf-fn--box {
    display: inline-grid;
    place-items: center;
    min-inline-size: 1.5em;
    block-size: 1.5em;
    padding-inline: var(--sf-space-1);
    border: var(--sf-border-hair) solid currentColor;
    border-radius: var(--sf-radius-plate);
    vertical-align: middle;
  }

  /* On phones a desk sheet (recipient views, rotated tablets) keeps a narrower pinned column. */
  @media (max-width: 37.49em) {
    .sf-sheet { --sf-req-col: 9.5rem; }
  }

  /* Width as a live axis: narrow sheets condense cell text before anything wraps or truncates. */
  @container sf-sheet (max-width: 47.5em) {
    .sf-grid { --sf-cell-width: var(--sf-width-condensed); }
  }

  /* Risk tabs (Risikoleiste): clause or validity findings above a column. */
  .sf-risk {
    display: inline-flex;
    align-items: center;
    gap: var(--sf-space-1);
    min-block-size: 1.5rem;
    padding: var(--sf-space-0-5) var(--sf-space-2);
    border: var(--sf-border-hair) solid var(--sf-risk-mark, var(--sf-ink));
    border-radius: var(--sf-radius-plate) var(--sf-radius-plate) 0 0;
    background: var(--sf-risk-ground, transparent);
    color: var(--sf-ink);
    font-size: var(--sf-text-xs);
    font-stretch: var(--sf-width-semi);
    font-weight: var(--sf-weight-bold);
    line-height: 1.15;
    overflow-wrap: anywhere;
  }
  .sf-risk > .sf-glyph { inline-size: 14px; block-size: 14px; color: var(--sf-risk-mark, var(--sf-ink)); }
  .sf-risk--serious { --sf-risk-mark: var(--sf-excl); --sf-risk-ground: var(--sf-excl-tint); }
  .sf-risk--unclear { --sf-risk-mark: var(--sf-uncl); --sf-risk-ground: var(--sf-uncl-tint); }

  /* Variant band (Sanierungsentscheid): a header row grouping offers by variant. */
  .sf-grid__variant th {
    padding: var(--sf-space-1) var(--sf-space-3);
    border-block-end: var(--sf-border-hair) solid var(--sf-rule-strong);
    border-inline-start: var(--sf-border-hair) solid var(--sf-rule-strong);
    background: var(--sf-sheet-band);
    font-size: var(--sf-text-md);
    font-stretch: var(--sf-width-condensed);
    font-weight: var(--sf-weight-heavy);
  }
  .sf-grid__variant th:first-child { border-inline-start: 0; }
  .sf-grid__variant-n { margin-inline-start: var(--sf-space-2); color: var(--sf-text-2); font-stretch: var(--sf-width-semi); font-weight: var(--sf-weight-medium); }

  /* ================================================================ 8. Ledger, figures, true-cost bars */

  .sf-ledger { position: sticky; inset-block-end: 0; z-index: 3; }
  .sf-ledger th, .sf-ledger td { padding: var(--sf-space-2) var(--sf-space-3); vertical-align: top; }
  .sf-ledger tr:first-child > * { border-block-start: var(--sf-border-strong) solid var(--sf-rule-strong); }
  .sf-ledger th[scope="row"] { font-weight: var(--sf-weight-semibold); }
  .sf-ledger__total > * { border-block-end: 3px double var(--sf-rule-strong); }
  .sf-ledger td { text-align: end; }
  .sf-ledger td.sf-ledger__bars { text-align: start; }
  .sf-ledger .sf-bar { margin-block: var(--sf-space-2) var(--sf-space-1); }
  .sf-ledger__note {
    display: block;
    color: var(--sf-text-2);
    font-size: var(--sf-text-xs);
    font-weight: var(--sf-weight-medium);
    line-height: var(--sf-leading-snug);
    white-space: normal;
  }

  .sf-figure {
    font-variant-numeric: tabular-nums;
    font-weight: var(--sf-weight-bold);
    white-space: nowrap;
  }
  .sf-figure--lg { font-size: var(--sf-text-lg); }
  .sf-figure--xl { font-size: var(--sf-text-2xl); font-stretch: var(--sf-width-semi); }
  .sf-figure__floor { margin-inline-end: var(--sf-space-1); color: var(--sf-text-2); font-weight: var(--sf-weight-semibold); }
  .sf-figure__unit { color: var(--sf-text-2); font-size: var(--sf-text-sm); font-weight: var(--sf-weight-medium); }
  .sf-figure__flap { display: inline-block; }
  .sf-figure--changed::after {
    content: "neu berechnet";
    display: inline-block;
    margin-inline-start: var(--sf-space-2);
    padding: var(--sf-space-0-5) var(--sf-space-1);
    border: var(--sf-border-hair) solid currentColor;
    border-radius: var(--sf-radius-plate);
    font-size: var(--sf-text-xs);
    font-weight: var(--sf-weight-semibold);
    vertical-align: 0.15em;
  }
  .sf-blocked { display: inline-flex; align-items: center; gap: var(--sf-space-1-5); color: var(--sf-ink); font-weight: var(--sf-weight-semibold); }
  .sf-blocked > .sf-glyph { color: var(--sf-excl); }

  /* True-cost bar: segments share one scale across all offers; the floor edge marks a minimum. */
  .sf-bar {
    position: relative;
    display: flex;
    align-items: stretch;
    block-size: 14px;
    inline-size: 100%;
    margin-block: var(--sf-space-1);
    background-image:
      linear-gradient(to right, var(--sf-rule-soft) 1px, transparent 1px),
      linear-gradient(to right, var(--sf-rule-soft) 1px, transparent 1px),
      linear-gradient(to right, var(--sf-rule-soft) 1px, transparent 1px);
    background-size: 1px 100%, 1px 100%, 1px 100%;
    background-position: 25% 0, 50% 0, 75% 0;
    background-repeat: no-repeat;
    border-block-end: var(--sf-border-hair) solid var(--sf-rule-strong);
  }
  .sf-bar--lg { block-size: 18px; }
  .sf-bar__seg { flex: none; inline-size: var(--sf-p, 0%); }
  .sf-bar__seg--bind { background: var(--sf-ink); }
  .sf-bar__seg--cont { border: 1.5px solid var(--sf-ink); border-inline-start-width: 0; background: var(--sf-sheet-select); }
  .sf-bar__seg--range { border: 1.5px dashed var(--sf-ink); border-inline-start-width: 0; }
  .sf-bar__edge {
    flex: none;
    inline-size: 10px;
    background: var(--sf-ink);
    clip-path: polygon(0 0, 100% 0, 0 100%);
  }
  .sf-bar__open {
    flex: none;
    inline-size: 14px;
    margin-inline-start: var(--sf-space-1);
    background-image: repeating-linear-gradient(135deg, var(--sf-nstat-mark) 0 1.5px, transparent 1.5px 4px);
    border: var(--sf-border-hair) solid var(--sf-nstat-mark);
  }
  .sf-barscale {
    display: flex;
    justify-content: space-between;
    color: var(--sf-text-2);
    font-size: var(--sf-text-xs);
    font-variant-numeric: tabular-nums;
  }
  .sf-barkey { display: flex; flex-wrap: wrap; gap: var(--sf-space-1) var(--sf-space-4); font-size: var(--sf-text-sm); font-stretch: var(--sf-width-semi); }
  .sf-barkey__item { display: inline-flex; align-items: center; gap: var(--sf-space-1-5); }
  .sf-barkey__swatch { display: inline-flex; inline-size: 22px; block-size: 12px; }
  .sf-barkey__swatch > .sf-bar__seg { inline-size: 100%; }

  /* Split-flap: a recalculated figure flips in the station display (dark mode only). */
  @media screen and (prefers-color-scheme: dark) and (prefers-reduced-motion: no-preference) {
    :root:not([data-theme="light"]):not([data-theme="outdoor"]) .sf-figure.is-flipping .sf-figure__flap {
      animation: sf-flap var(--sf-dur-state) var(--sf-ease-in-out);
    }
  }
  @media screen and (prefers-reduced-motion: no-preference) {
    :root[data-theme="dark"] .sf-figure.is-flipping .sf-figure__flap {
      animation: sf-flap var(--sf-dur-state) var(--sf-ease-in-out);
    }
  }
  @keyframes sf-flap {
    0% { transform: perspective(240px) rotateX(0deg); }
    50% { transform: perspective(240px) rotateX(-88deg); }
    50.01% { transform: perspective(240px) rotateX(88deg); }
    100% { transform: perspective(240px) rotateX(0deg); }
  }

  /* ================================================================ 9. Evidence drawer (Belegleiste) and bottom sheet */

  .sf-drawer {
    display: flex;
    flex-direction: column;
    min-inline-size: 0;
    background: var(--sf-surface);
    border: var(--sf-border-hair) solid var(--sf-rule);
    border-radius: var(--sf-radius-panel);
  }
  .sf-drawer--docked {
    position: sticky;
    inset-block-start: calc(var(--sf-topbar) + var(--sf-space-4));
    max-block-size: calc(100dvh - var(--sf-topbar) - var(--sf-space-8));
    overflow: auto;
  }
  @media (max-width: 79.99em) {
    .sf-drawer--docked { display: none; }
  }
  .sf-drawer__head {
    overflow-wrap: anywhere;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: start;
    gap: var(--sf-space-1) var(--sf-space-3);
    padding: var(--sf-space-4) var(--sf-space-4) var(--sf-space-3);
    border-block-end: var(--sf-border-hair) solid var(--sf-rule);
  }
  .sf-drawer__title {
    font-size: var(--sf-text-lg);
    font-stretch: var(--sf-width-semi);
    font-weight: var(--sf-weight-bold);
    line-height: var(--sf-leading-snug);
  }
  .sf-drawer__meta { color: var(--sf-text-2); font-size: var(--sf-text-sm); font-stretch: var(--sf-width-semi); }
  .sf-drawer__body { display: grid; gap: var(--sf-space-4); padding: var(--sf-space-4); }
  .sf-drawer__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sf-space-2);
    padding: var(--sf-space-3) var(--sf-space-4) var(--sf-space-4);
    border-block-start: var(--sf-border-hair) solid var(--sf-rule);
  }
  .sf-kv { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--sf-space-1) var(--sf-space-4); margin: 0; font-size: var(--sf-text-md); }
  .sf-kv dt { color: var(--sf-text-2); font-stretch: var(--sf-width-semi); }
  .sf-kv dd { margin: 0; font-weight: var(--sf-weight-medium); }

  /* Source passage: page excerpt with line numbers; the marked passage wears the sheet colour. */
  .sf-passage {
    overflow-wrap: anywhere;
    margin: 0;
    padding: var(--sf-space-3) var(--sf-space-4) var(--sf-space-3) 0;
    border: var(--sf-border-hair) solid var(--sf-rule);
    border-radius: var(--sf-radius-plate);
    background: var(--sf-surface);
    font-size: var(--sf-text-md);
    line-height: 1.6;
  }
  .sf-passage__src {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--sf-space-2);
    padding-inline-start: var(--sf-space-4);
    margin-block-end: var(--sf-space-2);
    color: var(--sf-text-2);
    font-size: var(--sf-text-xs);
    font-stretch: var(--sf-width-semi);
    font-weight: var(--sf-weight-semibold);
  }
  /* Line numbers are the list markers: <ol class="sf-passage__lines" start="7"> numbers from line 7. */
  .sf-passage__lines { margin: 0; padding: 0 0 0 2.75rem; list-style: decimal outside; }
  .sf-passage__lines li { padding-inline-start: var(--sf-space-1); }
  .sf-passage__lines li::marker {
    content: counter(list-item) "  ";
    color: var(--sf-ink-3);
    font-size: var(--sf-text-xs);
    font-variant-numeric: tabular-nums;
  }
  .sf-passage mark { padding-block: var(--sf-space-0-5); }

  /* Suggestion block: machine output is labelled as such, with its band and reason. */
  .sf-suggest {
    display: grid;
    gap: var(--sf-space-2);
    padding: var(--sf-space-3);
    border: var(--sf-border-hair) dashed var(--sf-control);
    border-radius: var(--sf-radius-plate);
    background: var(--sf-surface-2);
  }
  .sf-suggest__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sf-space-2); font-weight: var(--sf-weight-semibold); }
  .sf-suggest__who { color: var(--sf-text-2); font-size: var(--sf-text-xs); font-stretch: var(--sf-width-semi); }
  .sf-suggest__why { color: var(--sf-ink-2); font-size: var(--sf-text-sm); }

  .sf-details { border-block-start: var(--sf-border-hair) solid var(--sf-rule); }
  .sf-details > summary {
    display: flex;
    align-items: center;
    gap: var(--sf-space-2);
    min-block-size: var(--sf-hit);
    padding-inline: var(--sf-space-4);
    color: var(--sf-ink-2);
    font-size: var(--sf-text-sm);
    font-stretch: var(--sf-width-semi);
    font-weight: var(--sf-weight-semibold);
    list-style: none;
    cursor: pointer;
  }
  .sf-details > summary::-webkit-details-marker { display: none; }
  .sf-details > summary::before {
    content: "";
    inline-size: 6px;
    block-size: 6px;
    border-block-start: 1.5px solid currentColor;
    border-inline-end: 1.5px solid currentColor;
    transform: rotate(45deg);
    transition: transform var(--sf-dur-state) var(--sf-ease-out);
  }
  .sf-details[open] > summary::before { transform: rotate(135deg); }
  .sf-details__body { padding: 0 var(--sf-space-4) var(--sf-space-4); color: var(--sf-ink-2); font-size: var(--sf-text-sm); }

  /* Phone form: bottom sheet at 70 % height; the top edge carries a grip. */
  .sf-bottomsheet {
    position: fixed;
    inset-inline: 0;
    inset-block-end: 0;
    z-index: var(--sf-z-drawer);
    display: flex;
    flex-direction: column;
    max-block-size: var(--sf-bottomsheet);
    padding-block-end: env(safe-area-inset-bottom, 0px);
    background: var(--sf-surface);
    border-start-start-radius: var(--sf-radius-panel);
    border-start-end-radius: var(--sf-radius-panel);
    box-shadow: var(--sf-shadow-overlay);
    overflow: auto;
    overscroll-behavior: contain;
  }
  .sf-bottomsheet__grip {
    flex: none;
    align-self: center;
    inline-size: 40px;
    block-size: 4px;
    margin-block: var(--sf-space-2) 0;
    border-radius: 2px;
    background: var(--sf-control);
  }
  .sf-scrim {
    position: fixed;
    inset: 0;
    z-index: calc(var(--sf-z-drawer) - 1);
    background: var(--sf-scrim);
  }

  /* ================================================================ 10. Phone: requirement cards, offer picker, thumb bar */

  .sf-cards { --sf-text-2: var(--sf-sheet-ink-2); }
  .sf-offerpick {
    position: sticky;
    inset-block-start: var(--sf-topbar);
    z-index: var(--sf-z-sticky);
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: var(--sf-space-2);
    padding: var(--sf-space-2) var(--sf-space-4);
    background: var(--sf-sheet);
    border-block-end: var(--sf-border-hair) solid var(--sf-rule-strong);
  }
  .sf-offerpick__vs { color: var(--sf-text-2); font-size: var(--sf-text-sm); font-stretch: var(--sf-width-semi); }
  .sf-offerpick .sf-select > select { background: var(--sf-sheet-select); font-weight: var(--sf-weight-semibold); min-block-size: var(--sf-target-phone); }

  .sf-reqcard {
    display: grid;
    gap: var(--sf-space-3);
    padding: var(--sf-space-4);
    border-block-end: var(--sf-border-strong) solid var(--sf-rule-strong);
  }
  .sf-reqcard__title {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--sf-space-3);
    font-size: var(--sf-text-lg);
    font-stretch: var(--sf-width-semi);
    font-weight: var(--sf-weight-bold);
  }
  .sf-reqcard__req { color: var(--sf-text-2); font-size: var(--sf-text-sm); font-weight: var(--sf-weight-medium); }
  .sf-reqcard__offers { display: grid; margin: 0; padding: 0; list-style: none; border-block-start: var(--sf-border-hair) solid var(--sf-sheet-rule); }
  .sf-reqcard__offer {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--sf-space-3);
    min-block-size: var(--sf-target-phone);
    padding: var(--sf-space-2) var(--sf-space-6) var(--sf-space-2) 0;
    border-block-end: var(--sf-border-hair) solid var(--sf-sheet-rule);
  }
  .sf-reqcard__offer .sf-cell__corner { inset-block-start: var(--sf-space-1); inset-inline-end: 0; }
  .sf-reqcard__name { font-weight: var(--sf-weight-semibold); overflow-wrap: anywhere; }
  .sf-reqcard__offer--check { margin-inline: calc(-1 * var(--sf-space-2)); padding-inline-start: var(--sf-space-2); background: var(--sf-sheet-select); border: var(--sf-border-hair) solid var(--sf-rule-strong); }
  .sf-reqcard__quote {
    margin: 0;
    padding-inline-start: var(--sf-space-3);
    border-inline-start: var(--sf-border-hair) solid var(--sf-rule-strong);
    font-size: var(--sf-text-md);
  }
  .sf-reqcard__quote cite { display: block; margin-block-start: var(--sf-space-0-5); color: var(--sf-text-2); font-size: var(--sf-text-xs); font-style: normal; font-weight: var(--sf-weight-semibold); }
  .sf-reqcard > .sf-plate--quiet { justify-self: start; }
  .sf-reqcard__actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sf-space-2); }
  .sf-reqcard__actions .sf-plate { min-block-size: var(--sf-target-phone); padding-inline: var(--sf-space-2); white-space: normal; }
  details.sf-reqcard { gap: 0; padding-block: 0; }
  details.sf-reqcard > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sf-space-3);
    min-block-size: var(--sf-target-phone);
    font-size: var(--sf-text-base);
    font-stretch: var(--sf-width-semi);
    font-weight: var(--sf-weight-bold);
    list-style: none;
    cursor: pointer;
  }
  details.sf-reqcard > summary::-webkit-details-marker { display: none; }
  details.sf-reqcard > summary::after {
    content: "";
    flex: none;
    inline-size: 8px;
    block-size: 8px;
    margin-inline-end: var(--sf-space-1);
    border-block-end: 2px solid currentColor;
    border-inline-end: 2px solid currentColor;
    transform: rotate(-45deg);
    transition: transform var(--sf-dur-state) var(--sf-ease-out);
  }
  details.sf-reqcard[open] > summary::after { transform: rotate(45deg); }
  details.sf-reqcard[open] { padding-block-end: var(--sf-space-4); }
  .sf-reqcard__summary-states { display: inline-flex; gap: var(--sf-space-2); margin-inline-start: auto; }

  /* Page head on phones and paper pages: title first, facts below (never a label above). */
  .sf-pagehead { display: grid; gap: var(--sf-space-1); padding: var(--sf-space-5) var(--sf-gutter-phone) var(--sf-space-3); }
  @media (min-width: 64em) {
    .sf-pagehead { padding-inline: var(--sf-gutter-desk); }
  }
  .sf-pagehead__title { font-size: var(--sf-text-3xl); font-stretch: var(--sf-width-condensed); font-weight: var(--sf-weight-heavy); line-height: var(--sf-leading-tight); }
  @media (min-width: 64em) {
    .sf-pagehead__title { font-size: var(--sf-text-4xl); }
  }
  .sf-pagehead__meta { color: var(--sf-text-2); font-size: var(--sf-text-sm); font-stretch: var(--sf-width-semi); }
  .sf-block { padding: 0 var(--sf-gutter-phone); }
  .sf-block + .sf-block { margin-block-start: var(--sf-space-6); }
  .sf-block__title { margin-block-end: var(--sf-space-2); font-size: var(--sf-text-lg); font-stretch: var(--sf-width-condensed); font-weight: var(--sf-weight-heavy); }

  /* Capture on phones: camera first, the file picker always stays. */
  .sf-capture { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sf-space-2); margin-block: var(--sf-space-3); }
  .sf-capture__btn { white-space: normal; }
  .sf-capture__btn:focus-within { outline: var(--sf-focus-width) solid var(--sf-focus); outline-offset: var(--sf-focus-offset); }
  .sf-drawer__actions--phone { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* Ledger on phones: one row per offer, figure, note and the shared-scale bar. */
  .sf-ledgercard {
    display: grid;
    gap: var(--sf-space-2);
    padding: var(--sf-space-4);
    border-block-start: var(--sf-border-strong) solid var(--sf-rule-strong);
  }
  .sf-ledgercard__title { font-size: var(--sf-text-lg); font-stretch: var(--sf-width-condensed); font-weight: var(--sf-weight-heavy); }
  .sf-ledgercard__rows { display: grid; margin: 0; }
  .sf-ledgercard__row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--sf-space-0-5) var(--sf-space-3);
    padding-block: var(--sf-space-3);
    border-block-end: var(--sf-border-hair) solid var(--sf-sheet-rule);
  }
  .sf-ledgercard__row dt { display: flex; align-items: center; gap: var(--sf-space-2); font-weight: var(--sf-weight-semibold); }
  .sf-ledgercard__row dd { margin: 0; text-align: end; }
  .sf-ledgercard__row .sf-bar, .sf-ledgercard__row .sf-ledger__note { grid-column: 1 / -1; text-align: start; }

  .sf-topbar__title {
    flex: 1 1 0;
    min-inline-size: 0;
    font-size: var(--sf-text-base);
    font-stretch: var(--sf-width-semi);
    font-weight: var(--sf-weight-bold);
    line-height: var(--sf-leading-snug);
    overflow-wrap: anywhere;
  }

  /* Thumb bar: the one primary plate in the thumb zone, above the bottom navigation. */
  .sf-thumbbar {
    position: sticky;
    inset-block-end: 0;
    z-index: var(--sf-z-sticky);
    padding: var(--sf-space-3) var(--sf-gutter-phone);
    background: var(--sf-surface);
    border-block-start: var(--sf-border-hair) solid var(--sf-rule);
  }
  .sf-app--nav .sf-thumbbar { inset-block-end: calc(var(--sf-bottomnav) + env(safe-area-inset-bottom, 0px)); }
  .sf-thumbbar .sf-plate { inline-size: 100%; min-block-size: var(--sf-target-phone); font-size: var(--sf-text-lg); }
  @media (min-width: 37.5em) {
    .sf-thumbbar { display: none; }
  }

  /* Bottom navigation: phones and tablets; same destinations as the top navigation. */
  .sf-bottomnav {
    position: fixed;
    inset-inline: 0;
    inset-block-end: 0;
    z-index: var(--sf-z-bottomnav);
    display: grid;
    grid-auto-columns: minmax(0, 1fr);
    grid-auto-flow: column;
    min-block-size: calc(var(--sf-bottomnav) + env(safe-area-inset-bottom, 0px));
    padding-block-end: env(safe-area-inset-bottom, 0px);
    margin: 0;
    list-style: none;
    background: var(--sf-surface);
    border-block-start: var(--sf-border-hair) solid var(--sf-rule-strong);
  }
  @media (min-width: 64em) {
    .sf-bottomnav { display: none; }
  }
  .sf-bottomnav a {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--sf-space-1);
    block-size: 100%;
    min-block-size: var(--sf-target-phone);
    padding-inline: var(--sf-space-0-5);
    color: var(--sf-ink-2);
    font-size: var(--sf-text-xs);
    font-stretch: var(--sf-width-semi);
    font-weight: var(--sf-weight-semibold);
    line-height: 1.1;
    text-align: center;
    text-decoration: none;
    overflow-wrap: anywhere;
    hyphens: auto;
  }
  .sf-bottomnav a > .sf-glyph { inline-size: var(--sf-glyph-lg); block-size: var(--sf-glyph-lg); }
  .sf-bottomnav a[aria-current="page"] { color: var(--sf-ink); font-weight: var(--sf-weight-heavy); }
  .sf-bottomnav a[aria-current="page"]::before {
    content: "";
    position: absolute;
    inset-block-start: -1px;
    inset-inline: 22%;
    block-size: var(--sf-border-strong);
    background: var(--sf-ink);
  }
  .sf-bottomnav .sf-badge { inset-block-start: 6px; inset-inline-end: calc(50% - 22px); }

  /* ================================================================ 11. Footnote list (Belege) */

  .sf-footnotes {
    padding: var(--sf-space-3) var(--sf-space-4) var(--sf-space-4);
    border-block-start: var(--sf-border-hair) solid var(--sf-rule-strong);
    font-size: var(--sf-text-sm);
    font-stretch: var(--sf-width-semi);
  }
  @media (min-width: 48em) {
    .sf-footnotes { padding-inline: var(--sf-space-5); }
  }
  .sf-footnotes__title { margin-block-end: var(--sf-space-2); font-size: var(--sf-text-md); font-stretch: var(--sf-width-condensed); font-weight: var(--sf-weight-heavy); }
  .sf-footnotes__list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
    gap: var(--sf-space-1) var(--sf-space-6);
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .sf-footnotes__list li { display: grid; grid-template-columns: 2.4rem minmax(0, 1fr); gap: var(--sf-space-2); }
  .sf-footnotes__ref { font-weight: var(--sf-weight-bold); font-variant-numeric: tabular-nums; }

  /* ================================================================ 12. Tasks ("Heute", Kostenwächter on phones) */

  .sf-tasks {
    margin: 0;
    padding: 0;
    list-style: none;
    background: var(--sf-surface);
    border: var(--sf-border-hair) solid var(--sf-rule);
    border-radius: var(--sf-radius-panel);
  }
  .sf-task {
    display: grid;
    grid-template-columns: 4.25rem minmax(0, 1fr);
    gap: var(--sf-space-2) var(--sf-space-4);
    padding: var(--sf-space-4);
    border-block-end: var(--sf-border-hair) solid var(--sf-rule);
  }
  .sf-task:last-child { border-block-end: 0; }
  .sf-task__date { display: grid; align-content: start; gap: var(--sf-space-0-5); }
  .sf-task__day {
    font-size: var(--sf-text-xl);
    font-stretch: var(--sf-width-condensed);
    font-weight: var(--sf-weight-heavy);
    font-variant-numeric: tabular-nums;
    line-height: 1.05;
  }
  .sf-task__left { color: var(--sf-text-2); font-size: var(--sf-text-xs); font-stretch: var(--sf-width-semi); font-weight: var(--sf-weight-semibold); }
  .sf-task__date > .sf-glyph { margin-block-start: var(--sf-space-1); color: var(--sf-ink-2); }
  .sf-task__body { display: grid; gap: var(--sf-space-0-5); min-inline-size: 0; }
  .sf-task__title > .sf-glyph { margin-inline-end: var(--sf-space-1-5); color: var(--sf-ink-2); }
  .sf-task__title { font-size: var(--sf-text-base); font-stretch: var(--sf-width-semi); font-weight: var(--sf-weight-bold); line-height: var(--sf-leading-snug); }
  .sf-task__meta { color: var(--sf-text-2); font-size: var(--sf-text-sm); font-stretch: var(--sf-width-semi); }
  .sf-task__then { margin-block-start: var(--sf-space-0-5); font-size: var(--sf-text-sm); }
  .sf-task__then strong { font-variant-numeric: tabular-nums; }
  .sf-task__act { grid-column: 1 / -1; min-block-size: var(--sf-target-phone); }
  @media (min-width: 48em) {
    .sf-task { grid-template-columns: 5rem minmax(0, 1fr) auto; align-items: center; }
    .sf-task__act { grid-column: auto; min-block-size: var(--sf-hit); }
  }
  .sf-task--overdue .sf-task__left { color: var(--sf-excl); }

  /* ================================================================ 13. Data table on paper */

  .sf-tablewrap {
    overflow-x: auto;
    background: var(--sf-surface);
    border: var(--sf-border-hair) solid var(--sf-rule);
    border-radius: var(--sf-radius-panel);
    scrollbar-width: thin;
  }
  .sf-table {
    inline-size: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: var(--sf-text-md);
    font-variant-numeric: tabular-nums;
  }
  .sf-table caption {
    padding: var(--sf-space-4) var(--sf-space-4) var(--sf-space-2);
    caption-side: top;
    text-align: start;
    font-size: var(--sf-text-lg);
    font-stretch: var(--sf-width-condensed);
    font-weight: var(--sf-weight-heavy);
  }
  .sf-table th, .sf-table td {
    padding: var(--sf-space-3);
    border-block-end: var(--sf-border-hair) solid var(--sf-rule);
    background: var(--sf-surface);
    text-align: start;
    vertical-align: top;
  }
  .sf-table thead th {
    position: sticky;
    inset-block-start: 0;
    z-index: 1;
    border-block-end: var(--sf-border-strong) solid var(--sf-rule-strong);
    color: var(--sf-ink);
    font-size: var(--sf-text-sm);
    font-stretch: var(--sf-width-semi);
    font-weight: var(--sf-weight-bold);
    vertical-align: bottom;
    white-space: nowrap;
  }
  .sf-table tbody th { font-weight: var(--sf-weight-semibold); }
  .sf-table__num { text-align: end !important; white-space: nowrap; }
  /* Column measures: table layout reads width on col elements, not the logical property. */
  .sf-table__col-wide { width: 16rem; }
  .sf-table__col-lead { width: 11rem; }
  .sf-table__sub { display: block; margin-block-start: var(--sf-space-0-5); color: var(--sf-text-2); font-size: var(--sf-text-sm); font-weight: var(--sf-weight-regular); }
  .sf-table tbody tr:hover > * { background: var(--sf-surface-2); color: var(--sf-ink); }
  .sf-table tbody tr.is-selected > *,
  .sf-table tbody tr[aria-selected="true"] > * {
    --sf-text-2: var(--sf-sheet-ink-2);
    background: var(--sf-select);
  }
  .sf-table tfoot th, .sf-table tfoot td {
    position: sticky;
    inset-block-end: 0;
    border-block-start: var(--sf-border-strong) solid var(--sf-rule-strong);
    border-block-end: 0;
    font-weight: var(--sf-weight-bold);
  }
  .sf-table__sort {
    display: inline-flex;
    align-items: center;
    gap: var(--sf-space-1);
    min-block-size: var(--sf-target-dense);
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
  }
  .sf-table__sort > .sf-glyph { inline-size: 14px; block-size: 14px; color: var(--sf-ink-2); }
  .sf-table th[aria-sort="ascending"] .sf-table__sort > .sf-glyph,
  .sf-table th[aria-sort="descending"] .sf-table__sort > .sf-glyph { color: var(--sf-ink); }
  .sf-filterrow { display: flex; flex-wrap: wrap; align-items: end; gap: var(--sf-space-3); padding: var(--sf-space-3) var(--sf-space-4); border-block-end: var(--sf-border-hair) solid var(--sf-rule); }
  .sf-manual {
    display: inline-flex;
    align-items: center;
    gap: var(--sf-space-1);
    padding: 0 var(--sf-space-1-5);
    border: var(--sf-border-hair) dashed var(--sf-control);
    border-radius: var(--sf-radius-plate);
    color: var(--sf-text-2);
    font-size: var(--sf-text-xs);
    font-stretch: var(--sf-width-semi);
    font-weight: var(--sf-weight-semibold);
    white-space: nowrap;
  }
  @media (max-width: 37.49em) {
    .sf-table--stack thead { display: none; }
    .sf-table--stack, .sf-table--stack tbody, .sf-table--stack tr, .sf-table--stack th, .sf-table--stack td { display: block; }
    .sf-table--stack tr { padding: var(--sf-space-3) 0; border-block-end: var(--sf-border-hair) solid var(--sf-rule); }
    .sf-table--stack th, .sf-table--stack td { padding: var(--sf-space-1) var(--sf-space-4); border: 0; }
    .sf-table--stack td[data-label]::before {
      content: attr(data-label);
      display: block;
      color: var(--sf-text-2);
      font-size: var(--sf-text-xs);
      font-stretch: var(--sf-width-semi);
      font-weight: var(--sf-weight-semibold);
    }
    .sf-table--stack .sf-table__num { text-align: start !important; }
    .sf-table--stack tfoot tr { position: static; }
  }

  /* ================================================================ 14. Preisatlas: range strip */

  .sf-ranges { --sf-text-2: var(--sf-sheet-ink-2); }
  .sf-range {
    display: grid;
    gap: var(--sf-space-2);
    margin: 0;
    padding: var(--sf-space-4);
    border-block-end: var(--sf-border-hair) solid var(--sf-rule-strong);
  }
  @media (min-width: 48em) {
    .sf-range { padding-inline: var(--sf-space-5); }
  }
  .sf-range__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--sf-space-1) var(--sf-space-4); }
  .sf-range__title { font-size: var(--sf-text-lg); font-stretch: var(--sf-width-semi); font-weight: var(--sf-weight-bold); }
  .sf-range__unit { color: var(--sf-text-2); font-size: var(--sf-text-sm); font-stretch: var(--sf-width-semi); }
  .sf-range__strip { position: relative; block-size: 44px; margin-block-start: var(--sf-space-6); }
  .sf-range__strip::before {
    content: "";
    position: absolute;
    inset-inline: 0;
    inset-block-start: 50%;
    border-block-start: var(--sf-border-hair) solid var(--sf-sheet-rule);
  }
  .sf-range__whisker, .sf-range__box, .sf-range__median, .sf-range__own { position: absolute; inset-inline-start: var(--sf-p, 0%); }
  .sf-range__whisker {
    inset-block-start: calc(50% - 7px);
    block-size: 14px;
    inline-size: calc(var(--sf-q, 100%) - var(--sf-p, 0%));
    border-inline: var(--sf-border-hair) solid var(--sf-ink);
  }
  .sf-range__whisker::before {
    content: "";
    position: absolute;
    inset-inline: 0;
    inset-block-start: calc(50% - 0.5px);
    border-block-start: var(--sf-border-hair) solid var(--sf-ink);
  }
  .sf-range__box {
    inset-block-start: calc(50% - 11px);
    block-size: 22px;
    inline-size: calc(var(--sf-q, 100%) - var(--sf-p, 0%));
    background: var(--sf-sheet-band);
    border: var(--sf-border-hair) solid var(--sf-ink);
  }
  .sf-range__median {
    inset-block-start: calc(50% - 11px);
    block-size: 22px;
    inline-size: 2px;
    margin-inline-start: calc(-1 * var(--sf-border-hair));
    background: var(--sf-ink);
  }
  .sf-range__own {
    inset-block: calc(-1 * var(--sf-space-1-5)) 0;
    inline-size: 3px;
    margin-inline-start: calc(-1 * var(--sf-border-hair));
    background: var(--sf-ink);
  }
  .sf-range__ownlabel {
    position: absolute;
    inset-block-end: 100%;
    inset-inline-start: 0;
    transform: translateX(-50%);
    padding: var(--sf-space-0-5) var(--sf-space-2);
    border-radius: var(--sf-radius-plate);
    background: var(--sf-action);
    color: var(--sf-on-action);
    font-size: var(--sf-text-xs);
    font-stretch: var(--sf-width-semi);
    font-weight: var(--sf-weight-bold);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }
  .sf-range__own--end .sf-range__ownlabel { transform: translateX(-100%); }
  .sf-range__own--start .sf-range__ownlabel { transform: none; }
  .sf-range__axis {
    display: flex;
    justify-content: space-between;
    color: var(--sf-text-2);
    font-size: var(--sf-text-xs);
    font-variant-numeric: tabular-nums;
  }
  .sf-range__fact { font-weight: var(--sf-weight-semibold); }
  .sf-range__method { color: var(--sf-text-2); font-size: var(--sf-text-sm); font-stretch: var(--sf-width-semi); }
  .sf-range__empty {
    display: grid;
    gap: var(--sf-space-1);
    margin-block-start: var(--sf-space-2);
    padding: var(--sf-space-3) var(--sf-space-4);
    border: var(--sf-border-hair) dashed var(--sf-rule-strong);
    border-radius: var(--sf-radius-plate);
  }
  .sf-tag {
    display: inline-flex;
    align-items: center;
    gap: var(--sf-space-1);
    min-block-size: 1.25rem;
    padding: 0 var(--sf-space-1-5);
    border: var(--sf-border-hair) solid currentColor;
    border-radius: var(--sf-radius-plate);
    font-size: var(--sf-text-xs);
    font-stretch: var(--sf-width-semi);
    font-weight: var(--sf-weight-semibold);
    line-height: 1.2;
    white-space: nowrap;
  }
  .sf-tag--sample { border-style: dashed; }

  /* ================================================================ 15. Preisanpassung: formula and result line */

  .sf-pricecheck { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sf-space-4); align-items: start; }
  @media (min-width: 64em) {
    .sf-pricecheck { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr) minmax(0, 1fr); }
    .sf-pricecheck > .sf-result { grid-column: 1 / -1; }
  }
  @media (max-width: 63.99em) {
    .sf-pricecheck > .sf-result { order: -1; }
    .sf-pricecheck > .sf-formula { order: 0; }
  }
  .sf-formula {
    display: grid;
    gap: var(--sf-space-4);
    padding: var(--sf-space-4);
    background: var(--sf-surface);
    border: var(--sf-border-hair) solid var(--sf-rule);
    border-radius: var(--sf-radius-panel);
  }
  .sf-formula__title { font-size: var(--sf-text-xl); font-stretch: var(--sf-width-condensed); font-weight: var(--sf-weight-heavy); }
  .sf-formula__inputs { display: grid; margin: 0; border-block-start: var(--sf-border-strong) solid var(--sf-rule-strong); }
  .sf-formula__input {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--sf-space-0-5) var(--sf-space-3);
    padding-block: var(--sf-space-2);
    border-block-end: var(--sf-border-hair) solid var(--sf-rule);
  }
  .sf-formula__input dt { color: var(--sf-ink); font-size: var(--sf-text-md); font-stretch: var(--sf-width-semi); font-weight: var(--sf-weight-semibold); }
  .sf-formula__input dd { margin: 0; text-align: end; font-variant-numeric: tabular-nums; font-weight: var(--sf-weight-bold); }
  .sf-formula__input dd.sf-formula__src {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sf-space-2);
    text-align: start;
    color: var(--sf-text-2);
    font-size: var(--sf-text-xs);
    font-stretch: var(--sf-width-semi);
    font-weight: var(--sf-weight-medium);
  }
  .sf-formula__steps { display: grid; gap: var(--sf-space-3); margin: 0; padding: 0; list-style: none; counter-reset: sf-step; }
  .sf-formula__step {
    counter-increment: sf-step;
    display: grid;
    grid-template-columns: 1.75rem minmax(0, 1fr);
    column-gap: var(--sf-space-3);
    row-gap: var(--sf-space-0-5);
  }
  .sf-formula__step::before {
    content: counter(sf-step);
    grid-row: span 3;
    display: grid;
    place-items: center;
    inline-size: 1.5rem;
    block-size: 1.5rem;
    border: var(--sf-border-hair) solid var(--sf-ink);
    border-radius: var(--sf-radius-plate);
    font-size: var(--sf-text-sm);
    font-stretch: var(--sf-width-condensed);
    font-weight: var(--sf-weight-heavy);
  }
  .sf-formula__label { font-size: var(--sf-text-sm); font-stretch: var(--sf-width-semi); font-weight: var(--sf-weight-semibold); color: var(--sf-ink-2); }
  .sf-formula__expr { font-size: var(--sf-text-base); font-variant-numeric: tabular-nums; font-weight: var(--sf-weight-medium); overflow-wrap: anywhere; }
  .sf-formula__expr strong { font-weight: var(--sf-weight-heavy); }
  .sf-formula__note { color: var(--sf-text-2); font-size: var(--sf-text-sm); }

  .sf-result {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: var(--sf-space-2) var(--sf-space-4);
    padding: var(--sf-space-4);
    background: var(--sf-surface);
    border: var(--sf-border-strong) solid var(--sf-rule-strong);
    border-radius: var(--sf-radius-plate);
  }
  .sf-result > .sf-glyph { inline-size: 28px; block-size: 28px; color: var(--sf-result-mark, var(--sf-ink)); }
  .sf-result__line { font-size: var(--sf-text-xl); font-stretch: var(--sf-width-semi); font-weight: var(--sf-weight-bold); line-height: var(--sf-leading-snug); font-variant-numeric: tabular-nums; }
  .sf-result__label { color: var(--sf-text-2); font-weight: var(--sf-weight-semibold); }
  .sf-result__note { grid-column: 2; color: var(--sf-text-2); font-size: var(--sf-text-sm); }
  .sf-result__act { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: var(--sf-space-2); }
  @media (min-width: 48em) {
    .sf-result { grid-template-columns: auto minmax(0, 1fr) auto; }
    .sf-result__act { grid-column: 3; grid-row: 1 / span 2; }
  }
  .sf-result--covered { --sf-result-mark: var(--sf-incl); }
  .sf-result--over, .sf-result--threshold { --sf-result-mark: var(--sf-excl); }
  .sf-result--unchecked { --sf-result-mark: var(--sf-nstat); }

  /* Rechenweg: every derived amount shows its path (from the Abrechnung tradition). */
  .sf-rechenweg {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--sf-space-1) var(--sf-space-2);
    font-variant-numeric: tabular-nums;
  }
  .sf-rechenweg__expr { color: var(--sf-text-2); font-size: var(--sf-text-sm); }
  .sf-rechenweg__res { font-weight: var(--sf-weight-bold); }

  /* ================================================================ 16. Facts (Vertragsakte), share panel */

  .sf-factgroup + .sf-factgroup { margin-block-start: var(--sf-space-6); }
  .sf-factgroup__title { margin-block-end: var(--sf-space-2); font-size: var(--sf-text-lg); font-stretch: var(--sf-width-condensed); font-weight: var(--sf-weight-heavy); }
  .sf-facts { display: grid; margin: 0; border-block-start: var(--sf-border-strong) solid var(--sf-rule-strong); }
  .sf-fact {
    position: relative;
    display: grid;
    grid-template-columns: minmax(8rem, 2fr) minmax(0, 3fr);
    gap: var(--sf-space-0-5) var(--sf-space-4);
    padding: var(--sf-space-3) var(--sf-space-6) var(--sf-space-3) 0;
    border-block-end: var(--sf-border-hair) solid var(--sf-rule);
  }
  .sf-fact dt { color: var(--sf-ink-2); font-size: var(--sf-text-md); font-stretch: var(--sf-width-semi); font-weight: var(--sf-weight-semibold); }
  .sf-fact dd { margin: 0; font-weight: var(--sf-weight-medium); font-variant-numeric: tabular-nums; }
  .sf-fact__method { grid-column: 2; color: var(--sf-text-2); font-size: var(--sf-text-sm); font-weight: var(--sf-weight-regular) !important; }
  .sf-fact .sf-cell__corner { inset-block-start: var(--sf-space-2); inset-inline-end: 0; }
  .sf-fact--suggested { padding-inline-start: var(--sf-space-2); margin-inline-start: calc(-1 * var(--sf-space-2)); background: var(--sf-surface-2); border: var(--sf-border-hair) dashed var(--sf-control); }
  @media (max-width: 37.49em) {
    .sf-fact { grid-template-columns: minmax(0, 1fr); }
    .sf-fact__method { grid-column: 1; }
  }

  .sf-sharepanel { display: grid; gap: var(--sf-space-3); }
  .sf-share {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--sf-space-0-5) var(--sf-space-3);
    padding-block: var(--sf-space-3);
    border-block-end: var(--sf-border-hair) solid var(--sf-rule);
  }
  .sf-share__name { font-weight: var(--sf-weight-semibold); }
  .sf-share__value { text-align: end; }
  .sf-share .sf-rechenweg { grid-column: 1 / -1; }
  .sf-scenario {
    display: inline-flex;
    align-items: center;
    gap: var(--sf-space-1);
    padding: 0 var(--sf-space-1-5);
    border: var(--sf-border-hair) dashed currentColor;
    border-radius: var(--sf-radius-plate);
    font-size: var(--sf-text-xs);
    font-stretch: var(--sf-width-semi);
    font-weight: var(--sf-weight-bold);
    white-space: nowrap;
  }
  /* Under a ledger's row label the column is narrow on a phone: the mark wraps instead of crossing the column rule. */
  .sf-ledger__note .sf-scenario { white-space: normal; }

  /* ================================================================ 17. Banners, slips, toasts */

  .sf-banner {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: var(--sf-space-1) var(--sf-space-3);
    padding: var(--sf-space-3) var(--sf-space-4);
    border: var(--sf-border-hair) solid var(--sf-banner-edge, var(--sf-rule));
    border-radius: var(--sf-radius-plate);
    background: var(--sf-banner-ground, var(--sf-surface-2));
    color: var(--sf-ink);
    font-size: var(--sf-text-md);
  }
  .sf-banner > .sf-glyph { margin-block-start: var(--sf-space-0-5); color: var(--sf-banner-mark, var(--sf-ink)); }
  .sf-banner__title { font-weight: var(--sf-weight-bold); }
  .sf-banner__act { grid-column: 2; display: flex; flex-wrap: wrap; gap: var(--sf-space-2); }
  @media (min-width: 48em) {
    .sf-banner { grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; }
    .sf-banner__act { grid-column: 3; }
  }
  .sf-banner--offline { --sf-banner-ground: var(--sf-nstat-tint); --sf-banner-edge: var(--sf-nstat); --sf-banner-mark: var(--sf-nstat); }
  .sf-banner--stale { --sf-banner-ground: var(--sf-warn-tint); --sf-banner-edge: var(--sf-warn); --sf-banner-mark: var(--sf-warn); }
  .sf-banner--conflict { --sf-banner-ground: var(--sf-warn-tint); --sf-banner-edge: var(--sf-warn); --sf-banner-mark: var(--sf-warn); }
  .sf-banner--info { --sf-banner-ground: var(--sf-info-tint); --sf-banner-edge: var(--sf-info); --sf-banner-mark: var(--sf-info); }
  .sf-banner--error { --sf-banner-ground: var(--sf-excl-tint); --sf-banner-edge: var(--sf-excl); --sf-banner-mark: var(--sf-excl); }
  .sf-banner--ok { --sf-banner-ground: var(--sf-incl-tint); --sf-banner-edge: var(--sf-incl); --sf-banner-mark: var(--sf-incl); }
  /* Berichtigungszettel: a correction slip pasted on the sheet (stale or conflicting data). */
  .sf-banner--slip {
    --sf-banner-ground: var(--sf-sheet-select);
    --sf-banner-edge: var(--sf-rule-strong);
    --sf-text-2: var(--sf-sheet-ink-2);
    margin: var(--sf-space-3) var(--sf-space-4) 0;
    border-style: dashed;
  }

  .sf-toaster {
    position: fixed;
    inset-inline: var(--sf-gutter-phone);
    inset-block-end: calc(var(--sf-space-4) + env(safe-area-inset-bottom, 0px));
    z-index: var(--sf-z-toast);
    display: grid;
    justify-items: center;
    gap: var(--sf-space-2);
    pointer-events: none;
  }
  @media (max-width: 63.99em) {
    .sf-app--nav .sf-toaster { inset-block-end: calc(var(--sf-bottomnav) + var(--sf-space-16) + var(--sf-space-4) + env(safe-area-inset-bottom, 0px)); }
  }
  .sf-toast {
    display: flex;
    align-items: center;
    gap: var(--sf-space-2);
    inline-size: 100%;
    max-inline-size: 30rem;
    padding: var(--sf-space-2) var(--sf-space-2) var(--sf-space-2) var(--sf-space-4);
    background: var(--sf-surface);
    border: var(--sf-border-hair) solid var(--sf-rule-strong);
    border-radius: var(--sf-radius-panel);
    box-shadow: var(--sf-shadow-overlay);
    color: var(--sf-ink);
    font-size: var(--sf-text-md);
    pointer-events: auto;
  }
  .sf-toast > .sf-glyph { color: var(--sf-toast-mark, var(--sf-ink)); }
  .sf-toast__text { flex: 1 1 auto; }
  .sf-toast--ok { --sf-toast-mark: var(--sf-incl); }
  .sf-toast--error { --sf-toast-mark: var(--sf-excl); }
  @media (prefers-reduced-motion: no-preference) {
    .sf-toast--enter { animation: sf-rise var(--sf-dur-panel) var(--sf-ease-out) both; }
  }
  @keyframes sf-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

  /* ================================================================ 18. Dialog, command bar, tabs */

  .sf-dialog {
    inline-size: min(100% - 2 * var(--sf-gutter-phone), 36rem);
    max-block-size: min(100dvh - 2 * var(--sf-space-4), 46rem);
    padding: 0;
    border: var(--sf-border-hair) solid var(--sf-rule-strong);
    border-radius: var(--sf-radius-panel);
    background: var(--sf-surface);
    color: var(--sf-ink);
    box-shadow: var(--sf-shadow-overlay);
  }
  .sf-dialog::backdrop { background: var(--sf-scrim); }
  .sf-dialog__head { display: flex; align-items: start; justify-content: space-between; gap: var(--sf-space-3); padding: var(--sf-space-5) var(--sf-space-6) var(--sf-space-2); }
  .sf-dialog__title { font-size: var(--sf-text-2xl); font-stretch: var(--sf-width-condensed); font-weight: var(--sf-weight-heavy); line-height: var(--sf-leading-tight); }
  .sf-dialog__body { display: grid; gap: var(--sf-space-3); padding: var(--sf-space-2) var(--sf-space-6) var(--sf-space-4); }
  .sf-dialog__foot {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--sf-space-2);
    padding: var(--sf-space-4) var(--sf-space-6);
    border-block-start: var(--sf-border-hair) solid var(--sf-rule);
  }
  @media (max-width: 37.49em) {
    .sf-dialog { inline-size: 100%; max-inline-size: 100%; margin-block-end: 0; border-end-start-radius: 0; border-end-end-radius: 0; }
    .sf-dialog__foot { flex-direction: column-reverse; }
    .sf-dialog__foot > .sf-plate { inline-size: 100%; min-block-size: var(--sf-target-phone); }
  }
  @media (prefers-reduced-motion: no-preference) {
    .sf-dialog[open] { animation: sf-rise var(--sf-dur-panel) var(--sf-ease-out); }
  }
  /* Preview of an outward action: exactly what will be sent, to whom, when. */
  .sf-preview {
    display: grid;
    gap: var(--sf-space-2);
    padding: var(--sf-space-3) var(--sf-space-4);
    border: var(--sf-border-hair) solid var(--sf-rule);
    border-radius: var(--sf-radius-plate);
    background: var(--sf-surface-2);
    font-size: var(--sf-text-md);
  }

  .sf-cmdbar {
    inline-size: min(100% - 2 * var(--sf-gutter-phone), var(--sf-cmdbar));
    margin-inline: auto;
    background: var(--sf-surface);
    border: var(--sf-border-hair) solid var(--sf-rule-strong);
    border-radius: var(--sf-radius-panel);
    box-shadow: var(--sf-shadow-overlay);
    overflow: hidden;
  }
  .sf-cmdbar__field {
    display: flex;
    align-items: center;
    gap: var(--sf-space-3);
    padding-inline: var(--sf-space-4);
    border-block-end: var(--sf-border-hair) solid var(--sf-rule);
  }
  .sf-cmdbar__input {
    flex: 1 1 auto;
    min-block-size: var(--sf-target-phone);
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--sf-ink);
    font-size: var(--sf-text-lg);
  }
  .sf-cmdbar__input:focus-visible { outline: none; }
  .sf-cmdbar__field:focus-within { box-shadow: inset 0 calc(-1 * var(--sf-focus-width)) 0 var(--sf-focus); }
  .sf-cmdbar__list { margin: 0; padding: var(--sf-space-2) 0; list-style: none; max-block-size: 22rem; overflow: auto; }
  .sf-cmdbar__group {
    padding: var(--sf-space-2) var(--sf-space-4) var(--sf-space-1);
    color: var(--sf-text-2);
    font-size: var(--sf-text-xs);
    font-stretch: var(--sf-width-semi);
    font-weight: var(--sf-weight-bold);
  }
  .sf-cmdbar__item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--sf-space-3);
    min-block-size: var(--sf-hit);
    padding: var(--sf-space-1) var(--sf-space-4);
    cursor: pointer;
  }
  .sf-cmdbar__item[aria-selected="true"] { --sf-text-2: var(--sf-sheet-ink-2); background: var(--sf-select); }
  .sf-cmdbar__label { font-weight: var(--sf-weight-semibold); }
  .sf-cmdbar__hint { display: block; color: var(--sf-text-2); font-size: var(--sf-text-sm); font-weight: var(--sf-weight-regular); }
  .sf-cmdbar__foot {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sf-space-4);
    padding: var(--sf-space-2) var(--sf-space-4);
    border-block-start: var(--sf-border-hair) solid var(--sf-rule);
    color: var(--sf-ink-2);
    font-size: var(--sf-text-xs);
    font-stretch: var(--sf-width-semi);
  }

  .sf-tabs__list {
    display: flex;
    gap: var(--sf-space-4);
    overflow-x: auto;
    border-block-end: var(--sf-border-hair) solid var(--sf-rule);
    scrollbar-width: none;
  }
  .sf-tabs__tab {
    display: inline-flex;
    align-items: center;
    gap: var(--sf-space-2);
    min-block-size: var(--sf-hit);
    margin-block-end: calc(-1 * var(--sf-border-hair));
    padding: 0;
    border: 0;
    border-block-end: var(--sf-border-strong) solid transparent;
    background: transparent;
    color: var(--sf-ink-2);
    font-size: var(--sf-text-md);
    font-stretch: var(--sf-width-semi);
    font-weight: var(--sf-weight-semibold);
    white-space: nowrap;
  }
  .sf-tabs__tab:hover { color: var(--sf-ink); border-block-end-color: var(--sf-rule-strong); }
  .sf-tabs__tab[aria-selected="true"] { color: var(--sf-ink); font-weight: var(--sf-weight-bold); border-block-end-color: var(--sf-ink); }
  .sf-tabs__panel { padding-block-start: var(--sf-space-4); }

  /* ================================================================ 19. Queue rail, points list, pages */

  .sf-queue { display: grid; gap: var(--sf-space-2); }
  .sf-queue__counts { display: flex; gap: var(--sf-space-4); font-size: var(--sf-text-sm); font-stretch: var(--sf-width-semi); color: var(--sf-text-2); }
  .sf-queue__counts strong { color: var(--sf-ink); font-size: var(--sf-text-lg); font-variant-numeric: tabular-nums; }
  .sf-queue__list { margin: 0; padding: 0; list-style: none; }
  .sf-queue__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sf-space-2);
    min-block-size: var(--sf-hit);
    padding-inline: var(--sf-space-2);
    border-radius: var(--sf-radius-plate);
    color: var(--sf-ink);
    font-size: var(--sf-text-md);
    text-decoration: none;
  }
  .sf-queue__item:hover { background: var(--sf-surface-2); color: var(--sf-ink); }
  .sf-queue__item[aria-current="true"] { --sf-text-2: var(--sf-sheet-ink-2); background: var(--sf-select); font-weight: var(--sf-weight-bold); }
  .sf-queue__addr { color: var(--sf-text-2); font-size: var(--sf-text-xs); font-variant-numeric: tabular-nums; }

  .sf-points { margin: 0; padding: 0; list-style: none; border-block-start: var(--sf-border-strong) solid var(--sf-rule-strong); }
  .sf-point { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--sf-space-1) var(--sf-space-3); padding-block: var(--sf-space-3); border-block-end: var(--sf-border-hair) solid var(--sf-rule); }
  .sf-point > .sf-glyph { margin-block-start: var(--sf-space-1); color: var(--sf-state-mark, currentColor); }
  .sf-point__title { font-weight: var(--sf-weight-semibold); }
  .sf-point__text { grid-column: 2; color: var(--sf-ink-2); font-size: var(--sf-text-sm); }

  .sf-pages { display: grid; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); gap: var(--sf-space-4); }
  .sf-page {
    display: grid;
    align-content: start;
    gap: var(--sf-space-2);
    aspect-ratio: 210 / 297;
    padding: var(--sf-space-4);
    background: var(--sf-surface);
    border: var(--sf-border-hair) solid var(--sf-rule-strong);
    font-size: var(--sf-text-xs);
    overflow: hidden;
  }
  .sf-page__title { font-size: var(--sf-text-md); font-stretch: var(--sf-width-condensed); font-weight: var(--sf-weight-heavy); line-height: var(--sf-leading-snug); }
  .sf-page__no { margin-block-start: auto; color: var(--sf-ink-2); font-variant-numeric: tabular-nums; }

  /* ================================================================ 20. Loading, empty, progress */

  .sf-skel {
    display: block;
    inline-size: var(--sf-p, 100%);
    block-size: 0.8em;
    border-radius: 1px;
    background: var(--sf-skel-ground, var(--sf-surface-2));
  }
  .sf-sheet .sf-skel, .sf-cards .sf-skel { --sf-skel-ground: var(--sf-sheet-band); }
  @media (prefers-reduced-motion: no-preference) {
    .sf-skel { animation: sf-breathe 1.6s var(--sf-ease-in-out) infinite; }
  }
  @keyframes sf-breathe { 50% { opacity: 0.5; } }
  .sf-loading {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sf-space-2);
    color: var(--sf-text-2);
    font-size: var(--sf-text-sm);
    font-stretch: var(--sf-width-semi);
    font-weight: var(--sf-weight-semibold);
  }
  .sf-progress {
    position: relative;
    block-size: 6px;
    inline-size: 100%;
    border: var(--sf-border-hair) solid var(--sf-rule-strong);
    border-radius: 1px;
    overflow: hidden;
  }
  .sf-progress__fill { display: block; block-size: 100%; inline-size: var(--sf-p, 0%); background: var(--sf-ink); }

  .sf-empty {
    display: grid;
    gap: var(--sf-space-3);
    justify-items: start;
    padding: var(--sf-space-6);
    border: var(--sf-border-hair) dashed var(--sf-control);
    border-radius: var(--sf-radius-panel);
    background: var(--sf-surface);
  }
  .sf-empty__title { font-size: var(--sf-text-xl); font-stretch: var(--sf-width-condensed); font-weight: var(--sf-weight-heavy); }
  .sf-empty__text { max-inline-size: var(--sf-measure); color: var(--sf-ink-2); }
  .sf-empty__sample { inline-size: 100%; max-inline-size: 36rem; }
  .sf-empty__sample .sf-grid { min-inline-size: 0; }
  .sf-empty__sample .sf-cell__btn { min-block-size: 0; padding-block: var(--sf-space-2); cursor: default; }

  /* ================================================================ 21. Recipient pages (no account, no JavaScript) */

  .sf-recipient {
    min-block-size: 100dvh;
    padding: var(--sf-space-4) var(--sf-gutter-phone) var(--sf-space-16);
    background: var(--sf-ground);
  }
  .sf-notice {
    max-inline-size: var(--sf-recipient-measure);
    margin-inline: auto;
    padding: var(--sf-space-6) var(--sf-space-4) var(--sf-space-8);
    background: var(--sf-surface);
    border: var(--sf-border-hair) solid var(--sf-rule);
    border-radius: var(--sf-radius-plate);
  }
  @media (min-width: 37.5em) {
    .sf-notice { padding-inline: var(--sf-space-10); }
  }
  .sf-notice__letterhead {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--sf-space-3);
    padding-block-end: var(--sf-space-3);
    border-block-end: var(--sf-border-strong) solid var(--sf-rule-strong);
  }
  .sf-notice__from { font-size: var(--sf-text-md); font-stretch: var(--sf-width-semi); font-weight: var(--sf-weight-bold); }
  .sf-notice__addr { color: var(--sf-ink-2); font-size: var(--sf-text-sm); font-stretch: var(--sf-width-semi); }
  .sf-notice__title {
    margin-block: var(--sf-space-5) var(--sf-space-2);
    font-size: var(--sf-text-4xl);
    font-stretch: var(--sf-width-condensed);
    font-weight: var(--sf-weight-heavy);
    line-height: var(--sf-leading-tight);
  }
  @media (min-width: 37.5em) {
    .sf-notice__title { font-size: var(--sf-text-5xl); }
  }
  .sf-notice__lead { font-size: var(--sf-text-lg); color: var(--sf-ink); max-inline-size: var(--sf-measure); }
  .sf-notice__sec { margin-block-start: var(--sf-space-8); }
  .sf-notice__sec > h2 { margin-block-end: var(--sf-space-3); font-size: var(--sf-text-2xl); }
  .sf-notice__foot {
    display: grid;
    gap: var(--sf-space-2);
    margin-block-start: var(--sf-space-10);
    padding-block-start: var(--sf-space-4);
    border-block-start: var(--sf-border-hair) solid var(--sf-rule-strong);
    color: var(--sf-ink-2);
    font-size: var(--sf-text-sm);
  }
  .sf-notice--large { font-size: var(--sf-text-lg); line-height: 1.6; }
  .sf-notice--large .sf-notice__sec > h2 { font-size: var(--sf-text-3xl); }
  .sf-notice--large .sf-table { font-size: var(--sf-text-base); }
  .sf-notice--large .sf-point__text, .sf-notice--large .sf-table__sub, .sf-notice--large .sf-field__hint,
  .sf-notice--large .sf-notice__foot, .sf-notice--large .sf-notice__addr, .sf-notice--large .sf-table thead th { font-size: var(--sf-text-base); }
  .sf-belegcode {
    display: inline-flex;
    align-items: center;
    gap: var(--sf-space-2);
    padding: var(--sf-space-1) var(--sf-space-3);
    border: var(--sf-border-strong) solid var(--sf-ink);
    border-radius: var(--sf-radius-plate);
    color: var(--sf-ink);
    font-weight: var(--sf-weight-bold);
  }
  .sf-belegcode code { font-size: var(--sf-text-base); letter-spacing: 0.04em; }

  .sf-qcard { display: grid; gap: var(--sf-space-3); margin: 0; padding: var(--sf-space-5) 0; border: 0; border-block-end: var(--sf-border-hair) solid var(--sf-rule); }
  .sf-qcard > legend { float: inline-start; inline-size: 100%; margin-block-end: var(--sf-space-3); }
  .sf-qcard__title { display: flex; gap: var(--sf-space-3); align-items: baseline; font-size: var(--sf-text-lg); font-stretch: var(--sf-width-semi); font-weight: var(--sf-weight-bold); }
  .sf-qcard__no { flex: none; font-stretch: var(--sf-width-condensed); font-weight: var(--sf-weight-heavy); font-variant-numeric: tabular-nums; }
  .sf-choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sf-space-2); margin: 0; padding: 0; border: 0; }
  @media (min-width: 37.5em) {
    .sf-choices { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  }
  .sf-choices--3 { grid-template-columns: minmax(0, 1fr); }
  @media (min-width: 37.5em) {
    .sf-choices--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  }
  .sf-choice { position: relative; display: flex; }
  .sf-choice > input { position: absolute; opacity: 0; inline-size: 1px; block-size: 1px; }
  .sf-choice > span {
    display: flex;
    align-items: center;
    justify-content: center;
    inline-size: 100%;
    min-block-size: var(--sf-target-phone);
    padding: var(--sf-space-2) var(--sf-space-3);
    border: var(--sf-border-hair) solid var(--sf-control);
    border-radius: var(--sf-radius-plate);
    background: var(--sf-surface);
    color: var(--sf-ink);
    font-weight: var(--sf-weight-semibold);
    text-align: center;
    cursor: pointer;
  }
  .sf-choice > span:hover { border-color: var(--sf-ink); background: var(--sf-surface-2); color: var(--sf-ink); }
  .sf-choice > input:checked + span { background: var(--sf-action); border-color: var(--sf-action); color: var(--sf-on-action); }
  .sf-choice > input:focus-visible + span { outline: var(--sf-focus-width) solid var(--sf-focus); outline-offset: var(--sf-focus-offset); }
  .sf-file { padding: var(--sf-space-1); }
  .sf-file::file-selector-button {
    min-block-size: 36px;
    margin-inline-end: var(--sf-space-3);
    padding: 0 var(--sf-space-4);
    border: var(--sf-border-hair) solid var(--sf-control);
    border-radius: var(--sf-radius-plate);
    background: var(--sf-surface);
    color: var(--sf-ink);
    font: inherit;
    font-stretch: var(--sf-width-semi);
    font-weight: var(--sf-weight-semibold);
    cursor: pointer;
  }
  .sf-input--code { font-family: var(--sf-font-mono); letter-spacing: 0.06em; text-transform: uppercase; }
  .sf-codecheck { display: grid; gap: var(--sf-space-3); align-items: end; margin-block: var(--sf-space-6); }
  @media (min-width: 37.5em) {
    .sf-codecheck { grid-template-columns: minmax(0, 1fr) auto; }
  }
  /* A table set on the yellow sheet (owner sheet, Preisspiegel insert). */
  .sf-table--sheet th, .sf-table--sheet td { background: transparent; border-block-end-color: var(--sf-sheet-rule); }
  .sf-table--sheet thead th { background: var(--sf-sheet); border-block-end-color: var(--sf-rule-strong); }
  .sf-table--sheet tbody tr:hover > * { background: transparent; }
  .sf-notice__sheet { margin-block: var(--sf-space-3); border-block-start-width: var(--sf-border-strong); }
  .sf-notice__sheet .sf-table caption { padding-inline: var(--sf-space-3); }
  .sf-sendbar {
    position: sticky;
    inset-block-end: 0;
    margin-block-start: var(--sf-space-6);
    padding-block: var(--sf-space-3);
    background: var(--sf-surface);
    border-block-start: var(--sf-border-hair) solid var(--sf-rule);
  }
  .sf-verify { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--sf-space-1) var(--sf-space-3); padding: var(--sf-space-4); border: var(--sf-border-strong) solid var(--sf-rule-strong); border-radius: var(--sf-radius-plate); }
  .sf-verify > .sf-glyph { inline-size: 28px; block-size: 28px; color: var(--sf-verify-mark, var(--sf-ink)); }
  .sf-verify__title { font-size: var(--sf-text-xl); font-stretch: var(--sf-width-semi); font-weight: var(--sf-weight-bold); }
  .sf-verify__text { grid-column: 2; color: var(--sf-ink-2); }
  .sf-verify--ok { --sf-verify-mark: var(--sf-incl); }
  .sf-verify--changed { --sf-verify-mark: var(--sf-excl); }

  /* ================================================================ 22. Forced colours */

  @media (forced-colors: active) {
    .sf-plate, .sf-input, .sf-textarea, .sf-select > select, .sf-seg span, .sf-choice > span,
    .sf-chip, .sf-stamp, .sf-risk, .sf-badge, .sf-letter, .sf-basetag, .sf-banner, .sf-toast, .sf-result, .sf-verify {
      border: var(--sf-border-hair) solid CanvasText;
    }
    .sf-plate--primary, .sf-seg input:checked + span, .sf-choice > input:checked + span { border-width: 3px; }
    .sf-check > input, .sf-radio > input, .sf-switch { border-color: CanvasText; }
    .sf-check > input:checked, .sf-switch:checked { background: Highlight; }
    .sf-check > input:checked::before { border-color: HighlightText; }
    .sf-radio > input::before, .sf-switch::before { background: CanvasText; }
    .sf-sheet { border-block-start-color: CanvasText; }
    .sf-cell--check .sf-cell__btn::before, .sf-cell--open .sf-cell__btn::before { border-color: CanvasText; }
    .sf-cell.is-selected .sf-cell__btn::before, .sf-cell[aria-selected="true"] .sf-cell__btn::before { border-color: Highlight; }
    .sf-bar__seg--bind, .sf-bar__edge, .sf-range__median, .sf-progress__fill { forced-color-adjust: none; background: CanvasText; }
    .sf-range__box { forced-color-adjust: none; background: Canvas; border-color: CanvasText; }
    .sf-bottomnav a[aria-current="page"]::before, .sf-topnav a[aria-current="page"] { forced-color-adjust: none; }
    .sf-bottomnav a[aria-current="page"]::before { background: Highlight; }
  }

  /* ================================================================ 23. Print: the sheet on A4 landscape, recipient pages on A4 */

  @media print {
    @page { size: A4; margin: 14mm 12mm; }
    @page sf-sheet { size: A4 landscape; margin: 10mm; }
    .sf-topbar, .sf-topnav, .sf-bottomnav, .sf-thumbbar, .sf-drawer, .sf-casebar__actions, .sf-toaster,
    .sf-cmdbar, .sf-offerpick, .sf-scrim, .sf-bottomsheet, .sf-sendbar, .sf-reqcard__actions, .sf-stepper, .sf-stepsum {
      display: none !important;
    }
    .sf-work { display: block; padding: 0; }
    .sf-sheet {
      --sf-text-2: var(--sf-ink-2);
      --sf-text-3: var(--sf-ink-3);
      --sf-rule-soft: var(--sf-rule);
      --sf-nstat-mark: var(--sf-nstat);
      --sf-sheet-ink-2: var(--sf-ink-2);
      --sf-sheet-rule: color-mix(in srgb, var(--sf-ink) 30%, var(--sf-surface));
      page: sf-sheet;
      background: var(--sf-surface);
      border-block-start-width: 2pt;
      print-color-adjust: economy;
    }
    .sf-sheet .sf-grid th, .sf-sheet .sf-grid td, .sf-grid .sf-grid__base { background: var(--sf-surface); }
    .sf-sheet__scroll { overflow: visible; max-block-size: none; }
    .sf-grid { min-inline-size: 0; font-size: 8.5pt; }
    .sf-grid thead { position: static; display: table-header-group; }
    .sf-ledger { position: static; display: table-footer-group; }
    .sf-grid tbody th[scope="row"], .sf-grid thead th:first-child, .sf-grid tfoot th[scope="row"] { position: static; }
    .sf-grid tr { break-inside: avoid; }
    .sf-grid__group th { background: var(--sf-surface); border-block: 1pt solid var(--sf-ink); }
    .sf-cell__btn { min-block-size: 0; padding: 4pt 14pt 4pt 6pt; }
    .sf-cell__btn::before { background: none !important; }
    .sf-cell.is-selected .sf-cell__btn::before, .sf-cell[aria-selected="true"] .sf-cell__btn::before,
    .sf-cell__btn[aria-current="true"]::before { inset: 4px; border-width: var(--sf-border-hair); }
    .sf-cell:not(.sf-cell--check):not(.sf-cell--open) .sf-cell__btn[aria-current="true"]::before { border-color: transparent; }
    .sf-footnotes { break-inside: avoid; }
    .sf-notice { border: 0; padding: 0; max-inline-size: none; }
    .sf-recipient { padding: 0; background: var(--sf-surface); }
    .sf-notice--large { font-size: 13pt; }
    .sf-panel, .sf-tablewrap, .sf-formula, .sf-tasks { border-color: var(--sf-ink); }
    .sf-table thead th, .sf-table tfoot th, .sf-table tfoot td { position: static; }
    .sf-plate { border: var(--sf-border-hair) solid var(--sf-ink); background: none; color: var(--sf-ink); }
  }

} /* end @layer sf-components */