/**
 * Seitenrahmen: Sprunglink, Inhaltsbereich, Abstände.
 * Der Sprunglink ist nur bei Tastaturfokus sichtbar.
 */
@layer base {
  :where(body) {
    display: flex;
    flex-direction: column;
    min-block-size: 100vb;
  }

  .skip-link {
    position: absolute;
    inset-block-start: var(--space-2);
    inset-inline-start: var(--space-2);
    z-index: var(--z-skip);
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-md);
    background-color: var(--surface-contrast-bg);
    color: var(--surface-contrast-text);
    transform: translateY(-300%);
  }

  .skip-link:focus-visible {
    transform: none;
  }

  .page {
    flex: 1;
    inline-size: 100%;
    max-inline-size: var(--container-max);
    margin-inline: auto;
    padding: var(--space-10) var(--gutter) var(--space-16);
  }

  .page__header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3) var(--space-6);
    margin-block-end: 0;
  }

  .stack {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--stack-md);
  }

  .section-divider {
    padding-block-start: var(--space-8);
    border-block-start: var(--border-width-thin) solid var(--theme-table-border);
  }

  .cluster {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
  }
}

@layer components {
  .auth-card {
    max-inline-size: 28rem;
    margin-inline: auto;
  }
}