/* Die Sprachwahl (DE EN).

   Sie steht auf der Campus-Seite rechts in der Filterleiste, auf der
   Detailseite eines Referats neben dem Titel und im Archiv wie in der
   Gruendungsmaske in der Kopfzeile. Das Aussehen ist ueberall dasselbe und
   liegt deshalb hier; wo die Wahl im jeweiligen Raster sitzt, regelt die Seite
   selbst (subheader.css bzw. referat.css).

   Herausgeloest aus referat.css, als die Wahl von der Detailseite auf die
   uebrigen Seiten kam - sonst muessten Campus-Seite und Archiv die Regeln fuer
   Termine, Profil und Karten der Detailseite mitladen.

   Gebaut wie die Filterknoepfe daneben (.filter-btn in subheader.css): eine
   Kapsel mit zwei Feldern, das gewaehlte ausgefuellt. Auf der Campus-Seite
   stehen beide nebeneinander in derselben Leiste - saehen sie verschieden
   aus, laege der Unterschied an nichts. Die Masse sind von dort uebernommen
   und ergeben dieselbe Hoehe: aussen 3px Polster, innen 5px, zusammen die
   8px eines Filterknopfes. */

.sprachwahl {
  /* An einer Stelle zu aendern, falls die gefuellte Sprache anderswo eine
     andere Farbe tragen soll als das Blau der Filterleiste. */
  --wahl-aktiv: #3b82f6;

  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border: 1px solid rgba(0, 20, 64, 0.18);
  border-radius: 999px;
  background: #ffffff;
  /* damit die Kuerzel nicht mitten im Paar umbrechen */
  white-space: nowrap;
}

/* Beide Felder tragen dieselben Masse - sonst spraenge die Kapsel beim
   Umschalten in der Breite, weil "DE" und "EN" verschieden breit setzen. */
.sprachwahl__wahl {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 600;
  /* zwei Grossbuchstaben stehen ohne etwas Luft zu eng */
  letter-spacing: 0.04em;
}

/* Die gewaehlte Sprache: ausgefuellt wie ein aktiver Filterknopf. */
.sprachwahl__wahl--aktiv {
  background: var(--wahl-aktiv);
  color: #ffffff;
}

/* Die andere ist ein Link. Nicht unterstrichen: sie steht als Feld neben dem
   gefuellten, und ein Strich darunter liest sich wie ein zweiter Zustand. */
.sprachwahl__wahl--link {
  color: var(--navy-blue, #001440);
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.sprachwahl__wahl--link:hover,
.sprachwahl__wahl--link:focus-visible {
  background: rgba(59, 130, 246, 0.12);
  color: var(--wahl-aktiv);
}

/* Ohne href (Vorschau) fuehrt der Link nirgendwo hin - dann auch kein
   Mauszeiger, der etwas anderes verspricht. */
.sprachwahl__wahl--link:not([href]) {
  cursor: default;
}

.sprachwahl__wahl--link:not([href]):hover {
  background: none;
  color: var(--navy-blue, #001440);
}