@layer layout {
  body {
    display: grid;
    grid-template-rows: auto 1fr auto;
    gap: var(--space-m);
    padding-inline: clamp(var(--space-s), 4vw, var(--space-l));
    padding-block-end: var(--space-m);
    background: var(--color-bg);
    transition: background var(--speed) var(--ease), color var(--speed) var(--ease);
  }

  .site-header {
    position: sticky;
    inset-block-start: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-s);
    padding-block: var(--space-m);
    background: var(--color-bg);
    border-block-end: 1px solid transparent;
    transition: border-color var(--speed) var(--ease), background var(--speed) var(--ease);
  }

  .site-header.is-compact {
    border-block-end-color: var(--color-line);
  }

  main {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-l);
    container-type: inline-size;
  }

  /*
   * Der Hero füllt bewusst den ersten Bildschirm, damit das Profil darunter
   * liegt — nur so entsteht überhaupt ein Scrollweg, auf dem das große Logo
   * verschwinden und die Marke in die Kopfzeile nachrücken kann.
   */
  .hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-s);
    min-block-size: calc(100svh - 9rem);
    text-align: center;
  }

  .logo-stage {
    width: min(100%, 36rem);
    margin-block: var(--space-s);
  }

  .site-footer {
    text-align: center;
  }

  .skip-link {
    position: absolute;
    inset-inline-start: var(--space-s);
    inset-block-start: -4rem;
    padding: var(--space-2xs) var(--space-xs);
    background: var(--color-surface);
    color: var(--color-ink);
    border-radius: var(--radius);
    transition: inset-block-start var(--speed) var(--ease);
  }

  .skip-link:focus-visible {
    inset-block-start: var(--space-s);
  }
}