/*
 * Der Sprachumschalter.
 *
 * Er sitzt in der Kopfzeile neben den Handlungsknöpfen und muss dort leiser
 * sein als sie — er ist eine Einstellung, kein Angebot. Auffällig wird er erst
 * im Moment des Öffnens.
 *
 * Eigene Datei, weil er auf sechs Seiten steht, die sich drei verschiedene
 * Stylesheets teilen (index.html bringt seine Formatierung inline mit,
 * bestellen/kuendigen/widerrufen laden forms.css, die Rechtstexte legal.css).
 * In eines davon geschrieben, hätte er auf den anderen vier nichts angehabt.
 *
 * Die Farben kommen aus den Tokens der jeweiligen Seite. Wo es sie nicht gibt,
 * greifen die Rückfallwerte im zweiten Argument von var() — deshalb sieht er
 * auch auf einer Seite richtig aus, die ihre Palette anders benennt.
 */

.lang { position: relative; display: inline-flex; }

/* ── Der Knopf ──────────────────────────────────────────────────────────── */

.lang-btn {
  display: inline-flex; align-items: center; gap: 7px;
  height: 34px; padding: 0 11px;
  border: 1px solid var(--rule, #E5E1D6); border-radius: 10px;
  background: transparent;
  font: inherit; font-size: 12.5px; font-weight: 500;
  color: var(--dim, #6B7075);
  cursor: pointer;
  transition: color .18s, border-color .18s, background .18s;
}
.lang-btn:hover { color: var(--ink, #15181A); border-color: var(--ink, #15181A); }

.lang-btn > svg:first-child { width: 15px; height: 15px; flex: none; }

/* Das Endonym trägt die Schrift der jeweiligen Sprache — 中文 und हिन्दी brauchen
   mehr Raum nach oben und unten als lateinische Buchstaben, sonst schneidet die
   Zeilenhöhe die Zeichen an. */
.lang-now { line-height: 1.6; white-space: nowrap; }

.lang-chev { width: 12px; height: 12px; flex: none; opacity: .55; transition: transform .2s; }
.lang-btn[aria-expanded="true"] .lang-chev { transform: rotate(180deg); }

/* ── Die Liste ──────────────────────────────────────────────────────────── */

.lang-menu {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 200;
  min-width: 208px; padding: 6px;
  border: 1px solid var(--rule, #E5E1D6); border-radius: 14px;
  background: var(--bg, #FAFAF7);
  /* Zwei Schatten: ein enger für die Kante, ein weiter für die Höhe. Einer
     allein sieht entweder aufgeklebt oder verwaschen aus. */
  box-shadow: 0 1px 2px rgba(21, 24, 26, .06), 0 18px 44px -18px rgba(21, 24, 26, .3);

  transform-origin: top right;
  opacity: 0; transform: translateY(-6px) scale(.97);
  transition: opacity .18s ease, transform .18s cubic-bezier(.2, .9, .3, 1.2);
}
.lang-menu[data-open="true"] { opacity: 1; transform: none; }

.lang-menu button {
  display: grid; align-items: center; gap: 0 10px;
  grid-template-columns: 1fr auto;
  width: 100%; padding: 9px 10px;
  border: 0; border-radius: 10px;
  background: none; cursor: pointer; text-align: left;
  font: inherit; color: var(--ink, #15181A);

  /* Die Einträge laufen gestaffelt ein. `--i` setzt das Skript beim Bauen,
     damit die Verzögerung nicht sechsmal im Stylesheet steht. */
  opacity: 0; transform: translateY(4px);
  transition: opacity .22s ease, transform .22s ease, background .14s;
}
.lang-menu[data-open="true"] button {
  opacity: 1; transform: none;
  transition-delay: calc(var(--i) * 28ms);
}
.lang-menu button:hover { background: var(--bg-sand, #F2EFE6); }

.lang-native { font-size: 14px; font-weight: 500; line-height: 1.5; }
/* Der englische Name darunter, für den Fall, dass jemand die eigene Schrift
   gerade nicht lesen kann — ein chinesischer Rechner ohne Devanagari-Schriftart
   zeigt sonst nur Kästchen. */
.lang-en {
  grid-column: 1; grid-row: 2;
  font-size: 10.5px; letter-spacing: .04em; text-transform: uppercase;
  color: var(--dim-2, #9A9DA0);
}

.lang-tick {
  grid-column: 2; grid-row: 1 / span 2;
  width: 15px; height: 15px;
  opacity: 0; transform: scale(.6);
  transition: opacity .2s, transform .2s cubic-bezier(.2, .9, .3, 1.4);
}
.lang-menu button[aria-current="true"] .lang-tick { opacity: 1; transform: none; }
.lang-menu button[aria-current="true"] .lang-native { font-weight: 600; }

/* ── Der Wechsel ────────────────────────────────────────────────────────── */

/*
 * Beim Umschalten ändert sich die Länge fast jeder Zeile, und damit springt das
 * Layout. Ein kurzer Weichzeichner macht daraus eine Bewegung statt eines
 * Ruckelns — 150 ms hinaus, 150 ms herein, mehr würde sich langsam anfühlen.
 *
 * Nur die Deckkraft und der Filter, kein `display` und keine Höhe: alles, was
 * ein Umbrechen auslöst, würde die Seite währenddessen springen lassen.
 */
.lang-swapping body { opacity: .35; filter: blur(2px); }
body { transition: opacity .15s ease, filter .15s ease; }

/*
 * Der erste Aufbau.
 *
 * Ohne das liest ein französischer Besucher zwei Zehntelsekunden lang die
 * englische Überschrift, bevor sie umspringt — das Flackern, an dem man
 * »nachträglich übersetzt« sofort erkennt.
 *
 * Kein `visibility: hidden` und kein `display: none`: beides nimmt die Seite
 * aus dem Fluss, und der Bildlauf springt beim Freigeben. Nur die Deckkraft.
 * Das Skript nimmt die Klasse spätestens nach 700 ms weg, auch wenn das
 * Wörterbuch nie ankommt.
 */
.lang-loading body { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  .lang-menu, .lang-menu button, .lang-tick, .lang-chev, body { transition: none; }
  .lang-swapping body { opacity: 1; filter: none; }
}

/* ── Schmale Schirme ────────────────────────────────────────────────────── */

@media (max-width: 720px) {
  /* Auf dem Telefon zählt jeder Pixel in der Kopfzeile. Der Name verschwindet,
     der Globus bleibt — er ist das Zeichen, das ohnehin jeder kennt. */
  .lang-now, .lang-chev { display: none; }
  .lang-btn { padding: 0 9px; }
  .lang-menu { right: 0; min-width: 190px; }
}

/* ── Der Hinweis auf den Rechtsseiten ───────────────────────────────────── */

/*
 * AGB, Widerrufsbelehrung, Datenschutz und Impressum bleiben deutsch. Eine von
 * mir übersetzte AGB wäre ein Rechtstext, den nie jemand geprüft hat — und im
 * Streit wäre die Frage, welche Fassung gilt, teurer als der ganze Aufwand.
 * Also steht dort ein Satz statt einer Erfindung.
 */
.lang-legal-note {
  margin: 0 0 22px; padding: 12px 15px;
  border: 1px solid var(--rule, #E5E1D6); border-radius: 11px;
  background: var(--bg-sand, #F2EFE6);
  font-size: 12.5px; line-height: 1.6; color: var(--dim, #6B7075);
}
.lang-legal-note b { color: var(--ink, #15181A); font-weight: 600; }