@layer blocks {
  /* DE / EN toggle in the nav. Both halves are real links to real URLs, so it
     works without JS and each language stays independently indexable. The
     active half is marked with aria-current, which doubles as the style hook —
     no separate state class to keep in sync. */
  .lang-switch {
    display: flex;
    overflow: hidden;
    border: 1.5px solid var(--color-text);
    border-radius: var(--radius-s);
    font-size: 0.8rem;
    font-weight: var(--weight-semi);
  }

  .lang-switch a {
    padding: 0.3125rem 0.625rem; /* spec .lang a: 5px 10px */
    line-height: var(--leading-snug);
    color: var(--color-text-faint);
    --link-decoration: none;
  }

  .lang-switch a:hover {
    color: var(--color-text);
  }

  .lang-switch a[aria-current] {
    background: var(--color-text);
    color: var(--color-bg);
  }

  @container (width < 56rem) {
    .lang-switch a {
      padding: 0.3125rem 0.5rem; /* spec 5px 8px */
    }
  }
}