@layer blocks {
  .site-nav {
    container: site-nav / inline-size;
    /* The language switch's box height; CTA and hamburger match it when narrow. */
    --nav-control-size: calc(var(--text-xs) * var(--leading-snug) + 2 * var(--space-3xs) + 2 * var(--stroke-m));
    border-block-end: var(--stroke-s) var(--border-style) var(--color-border);
    padding-block: var(--space-xs); /* spec .nav-in 14px */
    position: sticky;
    inset-block-start: 0;
    background: var(--color-bg-glass);
    backdrop-filter: blur(8px);
    z-index: 100;
  }

  /* Spec 26px gaps. No wrap when wide: wrapping splits the bar above the hamburger. */
  .site-nav > .cluster {
    --cluster-space: var(--space-m);
    flex-wrap: nowrap;
  }

  .nav-links {
    --cluster-space: var(--space-s); /* spec 22px between links */
    margin-inline-start: auto; /* links, language switch and CTA trail */
    flex-wrap: nowrap;
  }

  /* Spec toggles at 820px, but the German labels overflow earlier. */
  @container site-nav (width < 56rem) {
    .site-nav > .cluster {
      --cluster-space: var(--space-2xs); /* spec .nav-in 10px */
      flex-wrap: wrap;
    }

    .site-nav .choice {
      block-size: var(--nav-control-size);
      order: 3;
    }

    .nav-cta {
      --button-padding: var(--space-2xs) var(--space-xs); /* spec 8px 13px */
      --button-display: inline-flex;
      align-items: center;
      block-size: var(--nav-control-size);
      order: 4;
    }

    .nav-links {
      order: 5;
      flex-basis: 100%;
      display: none;
      margin-inline-start: 0;
      margin-block-start: var(--space-3xs);
      padding-block-start: var(--space-3xs);
      border-block-start: var(--stroke-s) var(--border-style) var(--color-border);
    }

    .nav-links[data-state="open"] {
      display: flex;
      flex-direction: column;
      align-items: stretch;
      gap: 0;
    }

    .nav-links[data-state="open"] .nav-link {
      padding-block: var(--space-2xs);
      padding-inline: 2px;
      font-size: var(--text-base);
      --color-link: var(--color-text);
    }

    .nav-links li + li {
      border-block-start: var(--stroke-s) var(--border-style) var(--color-border);
    }
  }
}