/* ELDI Sprachumschalter mit Flaggen und Shop-Zielen.
   Additiv zu eldi.css, motion.css und haptik.css.
   Die Selektoren sind bewusst zweistufig (.langsw davor), weil eldi.css mit
   ".nav a, .nav button" sonst die Anzeigeart im Kopf uebersteuert. */

.langsw{position:relative;margin:0 .35rem 0 0;font-family:var(--mono)}

.langsw .langsw-btn{display:inline-flex;align-items:center;gap:.34rem;min-height:36px;padding:.3rem .45rem;
  border:1px solid var(--line,rgba(27,34,41,.14));border-radius:var(--r);background:transparent;
  color:var(--ink-2);font:600 .68rem/1 var(--mono);letter-spacing:.08em;cursor:pointer;
  transition:border-color var(--t),color var(--t),background var(--t)}
.langsw .langsw-btn:hover{color:var(--blue);border-color:var(--blue)}
.langsw .langsw-btn[aria-expanded="true"]{color:var(--blue);border-color:var(--blue);background:rgba(0,81,134,.06)}
.langsw .langsw-btn:focus-visible{outline:2px solid var(--brass);outline-offset:2px}
.langsw .langsw-caret{width:10px;height:10px;flex:0 0 10px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;transition:transform var(--t)}
.langsw .langsw-btn[aria-expanded="true"] .langsw-caret{transform:rotate(180deg)}

.langsw .flag{width:20px;height:14px;flex:0 0 20px;border-radius:2px;display:block;
  box-shadow:0 0 0 1px rgba(20,33,43,.22) inset}

.langsw .langsw-menu{position:absolute;top:calc(100% + 8px);right:0;z-index:70;min-width:252px;
  background:var(--white);border:1px solid var(--paper-3);border-radius:var(--r-l);
  box-shadow:var(--sh);padding:.55rem;
  opacity:0;transform:translateY(-6px) scale(.985);transform-origin:top right;pointer-events:none;
  transition:opacity .16s ease,transform .22s cubic-bezier(.2,.9,.25,1)}
.langsw.open .langsw-menu{opacity:1;transform:none;pointer-events:auto}
.langsw .langsw-menu[hidden]{display:none}
.langsw .langsw-h{margin:.15rem .35rem .3rem;font:700 .6rem/1 var(--mono);letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-3)}
.langsw .langsw-menu ul{list-style:none;margin:0 0 .5rem;padding:0}
.langsw .langsw-menu li+li{margin-top:2px}
.langsw .langsw-menu li a{display:flex;align-items:center;gap:.55rem;padding:.42rem .45rem;
  border-radius:var(--r);text-decoration:none;color:var(--ink);border:1px solid transparent;
  transition:background var(--t),border-color var(--t)}
.langsw .langsw-menu li a:hover{background:var(--paper-2);border-color:var(--paper-3)}
.langsw .langsw-menu li a[aria-current="true"]{border-color:var(--blue);background:rgba(0,81,134,.06)}
.langsw .langsw-n{font:600 .92rem/1.2 var(--font);flex:1 1 auto;white-space:nowrap}
.langsw .langsw-c{font:600 .62rem/1 var(--mono);letter-spacing:.1em;color:var(--ink-3);flex:0 0 auto}
.langsw .langsw-sep{border:0;border-top:1px dashed var(--paper-3);margin:.2rem .2rem .45rem}
.langsw .langsw-shop{display:flex;align-items:center;gap:.55rem;padding:.45rem;border-radius:var(--r);
  text-decoration:none;color:var(--ink);border:1px solid var(--brass);background:rgba(184,121,29,.07);
  transition:background var(--t)}
.langsw .langsw-shop:hover{background:rgba(184,121,29,.14);color:var(--ink)}
.langsw .langsw-shop .langsw-n{font-weight:700}
.langsw .langsw-ext{width:13px;height:13px;flex:0 0 13px;fill:none;stroke:var(--brass-2);stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
.langsw .langsw-note{margin:.45rem .35rem .1rem;font:400 .7rem/1.35 var(--font);color:var(--ink-3)}

/* Der Piktogramm-Autopilot setzt vor externe Links ein Zeichen; im Menue stoert es. */
.langsw .langsw-shop .eic,.langsw .langsw-menu li a .eic{display:none}

@media(max-width:899px){
  .langsw{margin-right:0}
  .langsw .langsw-btn .langsw-code{display:none}
  .langsw .langsw-menu{min-width:236px}
}
@media(prefers-reduced-motion:reduce){
  .langsw .langsw-menu{transition:none}
  .langsw .langsw-caret{transition:none}
}
/* Die Nachtschicht setzt --white, --paper-2 und --paper-3 um; das Menue folgt automatisch.
   Nur Messingblock und Rahmen brauchen dort etwas mehr Kontrast. */
body.night .langsw .langsw-shop{background:rgba(227,185,77,.12);border-color:var(--brass-l)}
body.night .langsw .langsw-btn{border-color:rgba(127,179,230,.28)}