/* Sprachumschalter für ancora.marketing
   Ergänzt style.css und ändert dort nichts. Farben werden bewusst nicht
   festgelegt, sondern über currentColor vom Umfeld geerbt. So passt der
   Umschalter automatisch in die dunkle Kopfzeile und in den Footer. */

.lang-switch {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.lang-switch a,
.lang-switch .lang-current {
  font: inherit;
  line-height: 1;
  color: currentColor;
  text-decoration: none;
  white-space: nowrap;
}

.lang-switch a {
  opacity: 0.55;
  transition: opacity 0.15s ease;
}

.lang-switch a:hover {
  opacity: 1;
}

.lang-switch a:focus-visible {
  opacity: 1;
  outline: 2px solid currentColor;
  outline-offset: 3px;
  border-radius: 2px;
}

.lang-switch .lang-current {
  opacity: 1;
  font-weight: 600;
}

/* Kopfzeile: kompakte Kürzel DE FR IT EN, damit die Navigation nicht bricht.
   Die Farbe wird hier bewusst explizit gesetzt. Erben scheitert, weil die
   Kopfzeile ihre helle Schriftfarbe erst auf .nav-link definiert. */
.lang-switch-head {
  gap: 0.6rem;
  margin-left: 0.5rem;
  padding-left: 0.9rem;
  border-left: 1px solid rgba(255, 255, 255, 0.25);
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  color: #ffffff;
}

.lang-switch-head a,
.lang-switch-head .lang-current {
  color: #ffffff;
}

/* Mobiles Menü: ausgeschriebene Namen, eigene Zeile.
   Falls der Hintergrund des Menüs hell ist, muss color hier auf den
   Navy-Wert geändert werden. */
.lang-switch-mobile {
  gap: 1rem;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  font-size: 0.9375rem;
  color: #ffffff;
}

.lang-switch-mobile a,
.lang-switch-mobile .lang-current {
  color: #ffffff;
}

/* Footer: ausgeschriebene Namen unter der Fusszeile */
.site-footer .lang-switch {
  margin-top: 1rem;
  font-size: 0.875rem;
}

@media (max-width: 860px) {
  .lang-switch-head {
    display: none;
  }
}

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