/* ============================================================
   Language toggle — EN / DE pill (fixed, top-right)
   ============================================================ */

/* ── Visibility rules ────────────────────────────────────── */
html[data-lang="en"] .lang-de { display: none !important; }
html[data-lang="de"] .lang-en { display: none !important; }

/* ── Toggle pill ─────────────────────────────────────────── */
.lang-toggle {
  position:         fixed;
  top:              1.1rem;
  right:            1.4rem;
  z-index:          9999;
  display:          flex;
  align-items:      center;
  background:       rgba(10, 18, 7, 0.78);
  backdrop-filter:  blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border:           1px solid rgba(255, 255, 255, 0.11);
  border-radius:    100px;
  padding:          3px;
  gap:              1px;
}

.lang-btn {
  background:       transparent;
  border:           none;
  color:            rgba(255, 255, 255, 0.38);
  font-family:      'Courier New', Courier, monospace;
  font-size:        0.54rem;
  letter-spacing:   0.13em;
  text-transform:   uppercase;
  padding:          0.30rem 0.72rem;
  border-radius:    100px;
  cursor:           pointer;
  transition:       background 160ms ease, color 160ms ease;
  line-height:      1;
  user-select:      none;
}

.lang-btn.is-active {
  background:       rgba(255, 255, 255, 0.13);
  color:            rgba(255, 255, 255, 0.90);
}

.lang-btn:hover:not(.is-active) {
  color:            rgba(255, 255, 255, 0.62);
}

.lang-btn:focus-visible {
  outline:          2px solid rgba(255, 255, 255, 0.50);
  outline-offset:   2px;
}

/* Separator dot between buttons */
.lang-toggle::before {
  content:          '';
  position:         absolute;
  left:             50%;
  top:              50%;
  transform:        translate(-50%, -50%);
  width:            1px;
  height:           10px;
  background:       rgba(255, 255, 255, 0.12);
  pointer-events:   none;
}