/* Sprachwahl EN/DE in der Kopfzeile (index.html .lang-switch, app.js). Global geladen; nur Tokens aus app.css.
   Optik wie das Segment (DESIGN.md: ein Baustein für Auswahl), aber klein: 28 px Knöpfe, Eyebrow-Schrift.
   Desktop rechts neben der Navigation, Handy zwischen Seiten-Aktion und Einstellungen-Symbol (order). */

.lang-switch {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 2px;
  padding: 2px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--surface-2);
}

.lang-opt {
  position: relative;
  display: inline-grid;
  place-items: center;
  min-width: 32px;
  height: 28px;
  padding: 0 7px;
  border: 0;
  border-radius: 7px;
  background: none;
  color: var(--text-2);
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  line-height: 1;
  cursor: pointer;
  transition: color var(--dur-1), background-color var(--dur-1), box-shadow var(--dur-1);
}
.lang-opt:hover { color: var(--text); }
.lang-opt[aria-pressed="true"] {
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-1), 0 0 0 1px var(--border);
}
.lang-opt:focus-visible { outline-offset: 0; }

/* Desktop: Abstand zur Navigation etwas kleiner als der Kopfzeilen-Abstand (24 px) */
@media (min-width: 760px) {
  .app-header .lang-switch { margin-left: calc(var(--s-2) - var(--s-6)); }
}
/* Schmaler Desktop (760–959 px) mit sechs Navigationspunkten (Prognosen an): Platz für die Sprachwahl schaffen –
   kleinerer Abstand Marke/Navigation, engere Navigationspunkte (gemessen: sonst 20–40 px Überbreite bei 760 px) */
@media (min-width: 760px) and (max-width: 959.98px) {
  .app-header .app-header-inner { gap: var(--s-3); }
  .app-header .lang-switch { margin-left: calc(var(--s-1) - var(--s-3)); }
  .app-header .app-nav .nav-link { padding: 0 7px; gap: 5px; }
  .app-header .lang-opt { min-width: 28px; padding: 0 5px; }
}

@media (max-width: 759.98px) {
  /* Reihenfolge: Marke · Seiten-Aktion · EN/DE · Einstellungen (im DOM steht die Sprachwahl nach der Navigation) */
  .app-header .lang-switch { order: 1; margin-left: auto; }
  .app-header .app-header-inner .nav-link--head { order: 2; margin-left: 0; }
  .app-header .header-action:not(:empty) ~ .lang-switch { margin-left: 0; }
  /* Touch-Ziel 44 px hoch (DESIGN.md 5), waagrecht nicht über die Nachbarn */
  .lang-opt::after { content: ""; position: absolute; top: calc(50% - 22px); left: 0; right: 0; height: 44px; }
}