/* Sprachumschalter im Kopfbereich. Zwei Schalter, der aktive traegt die Akzentfarbe. */
.lang-switch {
  display: inline-flex;
  align-items: stretch;
  gap: 0;
  border: 1px solid var(--line-2);
  border-radius: 9px;
  overflow: hidden;
  background: var(--panel);
  flex: 0 0 auto;
}

.lang-switch button {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--muted);
  font: 700 12px/1 var(--font-head, var(--font-body));
  letter-spacing: 1.6px;
  padding: 8px 11px;
  cursor: pointer;
  transition: background .16s ease, color .16s ease;
}

.lang-switch button + button { border-left: 1px solid var(--line-2); }

.lang-switch button:hover { color: var(--text); background: rgba(255, 255, 255, .05); }

.lang-switch button.on {
  color: #14100a;
  background: linear-gradient(180deg, #ffc44d, #e2ac2b);
  text-shadow: none;
}

.lang-switch button:focus-visible {
  outline: 2px solid #e2ac2b;
  outline-offset: -2px;
}

/* Im Kopf sitzt der Schalter rechts neben dem Zeitstempel und bekommt eine Trennlinie. */
.hud .lang-switch { margin-left: 16px; }

@media (max-width: 1100px) {
  .lang-switch button { padding: 7px 9px; font-size: 11px; letter-spacing: 1.2px; }
}