/* ── Language switch ──────────────────────────────────────────────────────────
   Rendered by i18n.js into every [data-lang-slot] a page offers, and floated
   bottom-left on a page that offers none — so the Demo, the Impressum and the
   privacy page get one without having to know about it.

   Its own file rather than a block in components.css, because the Demo does not
   load components.css. It loaded i18n.js all the same, so the switch was there,
   unstyled: a full-width block at the bottom of the page. This file ships next to
   the script that needs it, on all five pages.

   Colours fall back to literals: on the Demo the design tokens are not defined. */
.lang-switch {
  display: inline-flex;
  gap: 2px;
  padding: 2px;
  border-radius: 999px;
  border: 1px solid var(--line-0, rgba(255, 255, 255, 0.12));
  background: var(--surface-veil, rgba(20, 22, 28, 0.6));
}
.lang-switch.lang-switch-float {
  position: fixed;
  left: 12px;
  bottom: 10px;
  z-index: 60;
  background: rgba(255, 255, 255, 0.86);
  border-color: rgba(0, 0, 0, 0.12);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.lang-btn {
  appearance: none;
  border: 0;
  cursor: pointer;
  background: none;
  color: var(--fg-2, #86868b);
  font: 600 11px/1 var(--font-mono, ui-monospace, monospace);
  letter-spacing: 0.08em;
  padding: 5px 9px;
  border-radius: 999px;
  transition: color 0.2s, background-color 0.2s;
}
.lang-switch.lang-switch-float .lang-btn { color: #6e6e73; }
.lang-btn:hover { color: var(--fg-0, #fff); }
.lang-switch.lang-switch-float .lang-btn:hover { color: #1d1d1f; }
.lang-btn.is-on {
  background: var(--accent, #4163e4);
  color: #fff;
}
.lang-switch.lang-switch-float .lang-btn.is-on { background: #0071e3; color: #fff; }
.lang-btn:focus-visible { outline: 2px solid var(--accent, #4163e4); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .lang-btn { transition: none; }
}