/* DE/EN-Umschalter fuer hebelytics.de (Issue #574).
   Eine eigene Datei statt Inline-CSS in 16 Seiten: Die Seiten haben je eigene
   <style>-Bloecke, der Umschalter soll aber ueberall gleich aussehen.
   Optisch am LanguageSwitcher der App angelehnt (frontend/src/i18n). */
.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px;
  border: 1px solid #e0ddd6;
  border-radius: 999px;
  background: #fff;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  line-height: 1.6;
  white-space: nowrap;
  vertical-align: middle;
}
.lang-switch > span,
.lang-switch > a {
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .3px;
  text-decoration: none;
}
/* Die aktive Sprache ist bewusst kein Link: Ein Klick darauf fuehrt nirgendwo hin. */
.lang-switch > span {
  background: #2a3fc5;
  color: #fff;
}
.lang-switch > a {
  color: #565449;
}
.lang-switch > a:hover,
.lang-switch > a:focus-visible {
  background: #f2efe9;
  color: #15183b;
}

/* Auf dunklem Grund (Footer-Baender, dunkle Navigationen). */
.lang-switch--dark {
  border-color: rgba(255,255,255,.28);
  background: rgba(255,255,255,.10);
}
.lang-switch--dark > span {
  background: #ffd060;
  color: #1e2e9e;
}
.lang-switch--dark > a {
  color: rgba(255,255,255,.82);
}
.lang-switch--dark > a:hover,
.lang-switch--dark > a:focus-visible {
  background: rgba(255,255,255,.18);
  color: #fff;
}

/* Auf Seiten ohne Navigationsleiste (Rechtstexte, Weiterleitungs-Stubs) steht
   der Umschalter in einem eigenen Band ganz oben. */
.lang-bar {
  padding: 16px 24px 0;
  text-align: right;
}

/* In Navigationsleisten mit nur zwei Elementen (Logo links, Handlungsaufruf
   rechts) verteilt space-between den Umschalter sonst in die Mitte. Hier
   drueckt er sich neben den Handlungsaufruf. */
.lang-switch--push {
  margin-left: auto;
  margin-right: 14px;
}

/* Auf schmalen Bildschirmen wird in den Navigationsleisten jeder Pixel
   gebraucht: Der volle Umschalter drueckt dort den Handlungsaufruf aus dem
   Bild. Deshalb bleibt nur die jeweils ANDERE Sprache stehen - ein Knopf, der
   die Sprache wechselt. Die aktive Sprache steht ohnehin schon auf dem
   Bildschirm, sie muss nicht zusaetzlich beschriftet werden. */
@media (max-width: 760px) {
  .lang-switch > span { display: none; }
  .lang-switch > a {
    padding: 4px 8px;
    color: #2a3fc5;
  }
  .lang-switch--push { margin-right: 10px; }
  /* Im eigenen Band ueber Rechtstexten ist genug Platz - dort bleiben beide. */
  .lang-bar .lang-switch > span { display: inline; }
  .lang-bar .lang-switch > a { color: #565449; }
}

/* Zwei Plaetze, nie beide gleichzeitig sichtbar: In der Navigationsleiste ist
   der Umschalter am schnellsten zu finden, dort fehlt auf schmalen
   Bildschirmen aber der Platz. Deshalb wandert er dort in den Fussbereich. */
.lang-bar--footer { display: none; }
@media (max-width: 760px) {
  .lang-switch--nav { display: none; }
  .lang-bar--footer {
    display: block;
    padding: 0 24px 18px;
    text-align: center;
  }
  .lang-bar--footer .lang-switch > span { display: inline; }
  .lang-bar--footer .lang-switch:not(.lang-switch--dark) > a { color: #565449; }
}