/* =========================================================================
   TriaTex Sprachschalter - GLOBAL STYLES (für bestehenden Header)
   Diese Styles haben KEINEN .tx-home-Prefix, sodass der Schalter
   auch im euren bestehenden Header außerhalb der .tx-home Section
   funktioniert.

   Einbinden via:
     <link rel="stylesheet" href="css/lang-switcher.css">

   Oder in euer bestehendes Header-CSS einfügen.
   ========================================================================= */

.lang {
  position: relative;
  z-index: 9000;
  display: inline-flex; align-items: center;
  font-family: 'Inter Tight', system-ui, -apple-system, sans-serif;
}
.lang-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 12px; border-radius: 100px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  color: #f1f5f9;
  font-size: 12.5px; font-weight: 600;
  cursor: pointer; line-height: 1;
  transition: background .15s ease, border-color .15s ease;
}
.lang-btn:hover {
  background: rgba(255,255,255,.07);
  border-color: rgba(255,255,255,.12);
}
.lang-btn .flag { font-size: 14px; line-height: 1; }
.lang-btn .code {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 11px; letter-spacing: .04em;
}
.lang-btn .chev {
  width: 10px; height: 10px; opacity: .6;
  transition: transform .2s ease;
}
.lang.open .lang-btn .chev { transform: rotate(180deg); }

.lang-menu {
  position: absolute; top: calc(100% + 8px); right: 0;
  min-width: 180px;
  background: linear-gradient(180deg, #141c2e, #0a0e1a);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 14px;
  padding: 6px;
  box-shadow: 0 20px 60px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.05);
  display: none;
  z-index: 99999;
}
.lang.open .lang-menu { display: block; }

.lang-menu .opt {
  display: flex; align-items: center; gap: 12px;
  padding: 8px 12px; border-radius: 9px;
  color: #a3b3c7; cursor: pointer;
  font-size: 13px;
  text-decoration: none;
  transition: background .12s ease, color .12s ease;
}
.lang-menu .opt:hover {
  background: rgba(255,255,255,.05);
  color: #f1f5f9;
}
.lang-menu .opt.active {
  background: rgba(94,234,212,.08);
  color: #5eead4;
}
.lang-menu .opt .flag { font-size: 16px; line-height: 1; }
.lang-menu .opt .code {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 10.5px; color: #5a6473;
  margin-left: auto; letter-spacing: .04em;
}
.lang-menu .opt.active .code { color: #5eead4; }