/**
 * Utilities: schlagen components (Layer-Reihenfolge).
 * Werte, die Komponenten überschreiben dürfen, stehen im var()-Fallback,
 * NICHT als Deklaration auf dem Element. Sonst friert die Utility den Wert ein:
 *   richtig: padding-block: var(--pad, var(--stack-lg));
 *   falsch:  --pad: …; padding-block: var(--pad);
 */
@layer utilities {
  .u-container {
    inline-size: 100%;
    max-inline-size: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--gutter);
  }

  .u-theme-scope {
    background-color: var(--theme-page-bg);
    color: var(--theme-page-text);
  }

  .u-bg-secondary {
    background-color: var(--background-secondary);
  }

  .u-bg-floating {
    background-color: var(--background-floating);
  }

  .u-bg-inset {
    background-color: var(--background-inset);
  }

  .u-meta {
    color: var(--theme-meta-color);
    font-size: var(--font-size-small);
    line-height: var(--line-height-small);
  }

  .u-mono {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
  }

  .u-num {
    font-variant-numeric: tabular-nums;
  }

  .u-visually-hidden {
    position: absolute !important;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}