/* Der Sprachumschalter -- auf jeder Seite derselbe.
   Ein Knopf wie alle anderen (schwarz, feine Kante), darin Weltkugel, Kuerzel und ein
   Pfeil; darunter eine ruhige Liste mit den Namen der Sprachen in ihrer eigenen
   Sprache. Keine Flaggen und keine Farbe: Farbe steht in dieser Oberflaeche nur fuer
   Warnungen, und der Umschalter soll nicht vom Inhalt ablenken.

   Die Datei wird von Seiten mit landing.css und von Seiten mit style.css geladen.
   Deshalb traegt jede Angabe den Wert aus landing.css als Rueckfall. */

.sprachwahl { position: relative; display: inline-flex; flex-shrink: 0; }

.sprachwahl-knopf {
  display: inline-flex; align-items: center; gap: 6px;
  height: 36px; padding: 0 9px 0 10px; border-radius: 8px;
  border: 1px solid var(--line-strong, #2b2b30); background: var(--knopf, #000000);
  color: var(--fg, #f2f2f3); font-family: inherit; font-size: 12.5px; font-weight: 600;
  letter-spacing: .04em; line-height: 1; cursor: pointer;
  transition: background .18s ease, border-color .18s ease;
}
.sprachwahl-knopf:hover,
.sprachwahl.offen .sprachwahl-knopf { background: var(--knopf-hover, #161618); border-color: var(--line-hover, #3b3b41); }
.sprachwahl-ic { width: 16px; height: 16px; color: var(--fg-2, #a0a0a7); flex-shrink: 0; }
.sprachwahl-kurz { white-space: nowrap; }
.sprachwahl-pfeil { width: 13px; height: 13px; color: var(--fg-3, #6c6c74); flex-shrink: 0; transition: transform .2s ease; }
.sprachwahl.offen .sprachwahl-pfeil { transform: rotate(180deg); }

.sprachwahl-liste {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 150;
  min-width: 190px; margin: 0; padding: 5px; list-style: none;
  background: var(--surface, #111113); border: 1px solid var(--line-strong, #2b2b30); border-radius: 10px;
  box-shadow: 0 18px 44px -24px rgba(0, 0, 0, .9);
}
.sprachwahl-liste[hidden] { display: none; }
/* Ganz unten in der Seitenleiste oeffnet die Liste nach oben, sonst liefe sie aus
   dem Bild. */
.sprachwahl.oben .sprachwahl-liste { top: auto; bottom: calc(100% + 6px); }
.sprachwahl.links .sprachwahl-liste { right: auto; left: 0; }
/* Ganze Breite, Name statt Kuerzel (Seitenleiste des Dashboards). */
.sprachwahl.voll, .sprachwahl.voll .sprachwahl-knopf { width: 100%; }
.sprachwahl.voll .sprachwahl-knopf { padding: 0 10px; gap: 9px; letter-spacing: 0; font-weight: 500; font-size: 13px; color: var(--fg-1, #d8d8db); }
.sprachwahl.voll .sprachwahl-pfeil { margin-left: auto; }
.sprachwahl.voll .sprachwahl-liste { left: 0; right: 0; min-width: 0; }

.sprachwahl-liste li { margin: 0; padding: 0; }
.sprachwahl-liste button {
  display: flex; align-items: center; gap: 12px; width: 100%; height: 36px; padding: 0 10px;
  border: 0; border-radius: 7px; background: none; color: var(--fg-1, #d8d8db);
  font-family: inherit; font-size: 13.5px; font-weight: 500; text-align: left; cursor: pointer;
}
.sprachwahl-liste button:hover,
.sprachwahl-liste button:focus-visible { background: var(--surface-hover, #1c1c1f); color: var(--fg, #f2f2f3); outline: none; }
.sprachwahl-liste button[aria-checked="true"] { color: var(--fg, #f2f2f3); font-weight: 600; }
.sprachwahl-code {
  width: 22px; flex-shrink: 0; font-family: var(--font-mono, 'JetBrains Mono', ui-monospace, monospace);
  font-size: 10.5px; letter-spacing: .08em; color: var(--fg-3, #6c6c74);
}
.sprachwahl-name { flex: 1; white-space: nowrap; }
.sprachwahl-haken { width: 15px; height: 15px; color: var(--fg, #f2f2f3); flex-shrink: 0; }

/* Seiten ohne Kopfleiste (Discord verknuepfen, der Download-Link des Servers): Die
   Sprachwahl steht oben rechts, ausserhalb der Karte. */
.ecke-sprache { position: fixed; top: 16px; right: 16px; z-index: 10; }

/* Waehrend eine vorab auf Englisch erzeugte Seite in die gewaehlte Sprache umgestellt
   wird, bleibt sie verdeckt. sprache.js setzt die Klasse und nimmt sie wieder weg. */
html.sprache-wechselt body { visibility: hidden; }

@media (prefers-reduced-motion: reduce) {
  .sprachwahl-knopf, .sprachwahl-pfeil { transition: none; }
}