/* Sprachumschalter und Übersetzungshinweis. Passt zu site.css und soon.css. */
html.i18n-pending body { visibility: hidden; }

.lang { position: relative; display: inline-flex; flex: none; }
.lang-btn {
  display: inline-flex; align-items: center; gap: .4rem; height: 34px; padding: 0 .7rem;
  border: 1px solid rgba(255, 255, 255, .12); border-radius: 999px; background: rgba(255, 255, 255, .03);
  color: rgba(243, 247, 250, .78); cursor: pointer;
  font: 700 .74rem/1 Manrope, system-ui, sans-serif; letter-spacing: .08em;
  transition: color .2s, background .2s, border-color .2s;
}
.lang-btn:hover, .lang.is-open .lang-btn { color: #f3f7fa; background: rgba(255, 255, 255, .07); border-color: rgba(94, 228, 200, .4); }
.lang-btn:focus-visible { outline: 2px solid rgba(94, 228, 200, .55); outline-offset: 2px; }
.lang-btn svg { flex: none; color: #5ee4c8; }

.lang-menu {
  position: absolute; z-index: 40; top: calc(100% + .5rem); right: 0; min-width: 168px;
  margin: 0; padding: .35rem; list-style: none;
  border: 1px solid rgba(255, 255, 255, .12); border-radius: 14px;
  background: rgba(12, 17, 23, .96); backdrop-filter: blur(16px) saturate(140%);
  box-shadow: 0 20px 50px rgba(0, 0, 0, .5);
  animation: lang-in .18s cubic-bezier(.2, .8, .2, 1);
}
.lang-menu[hidden] { display: none; }
.lang--up .lang-menu { top: auto; bottom: calc(100% + .5rem); right: 50%; transform: translateX(50%); animation-name: lang-in-up; }
.lang-menu button {
  display: flex; align-items: center; justify-content: space-between; gap: .8rem; width: 100%;
  padding: .55rem .7rem; border: 0; border-radius: 9px; background: none; cursor: pointer; text-align: left;
  color: rgba(243, 247, 250, .8); font: 600 .88rem/1.2 Manrope, system-ui, sans-serif;
}
.lang-menu button:hover, .lang-menu button:focus-visible { outline: 0; color: #f3f7fa; background: rgba(255, 255, 255, .06); }
.lang-menu button[aria-current="true"] { color: #5ee4c8; }
.lang-menu button[aria-current="true"]::after {
  content: ""; width: 7px; height: 7px; border-radius: 50%; background: #5ee4c8; box-shadow: 0 0 10px rgba(94, 228, 200, .6);
}
@keyframes lang-in { from { opacity: 0; transform: translateY(-4px); } }
@keyframes lang-in-up { from { opacity: 0; transform: translate(50%, 4px); } }

/* Fußzeilen von Coming Soon, Impressum und Datenschutz: zentriert unter den Links */
.foot .lang { align-self: center; }
.foot .lang-btn { height: 30px; font-size: .7rem; color: rgba(139, 152, 164, .85); }
.foot a + .lang { margin-left: .2rem; }

/* Produktseite: Umschalter sitzt zwischen Navigation und Button */
.top .lang { margin-left: .2rem; }
@media (max-width: 680px) {
  .top .lang { margin-left: auto; }
  .top .lang ~ .btn-small { margin-left: 0; }
}

/* Beschriftung im Farbfeld des Editors nicht in Monospace (".color span") */
.insp .color .i18n-lbl { font: inherit; color: inherit; }

/* Hinweis auf Rechtsseiten, nur in Übersetzungen sichtbar */
.i18n-note { display: none; }
html:not([lang="de"]) .i18n-note {
  display: block; margin: 0 0 1.6rem; padding: .75rem 1rem; border-radius: 12px;
  border: 1px solid rgba(245, 196, 81, .35); background: rgba(245, 196, 81, .08);
  color: #f5d68a; font-size: .88rem; line-height: 1.5;
}

/* Längere Übersetzungen: Navigation und Untertitel nicht umbrechen */
.top .nav a, .top .btn-small { white-space: nowrap; }
.top .brand { min-width: 0; }
@media (max-width: 400px) {
  .top { gap: .6rem; }
  .top .lang-btn { padding: 0 .55rem; }
}
@media (max-width: 900px) {
  html:not([lang="de"]) .top .nav { display: none; }
  html:not([lang="de"]) .top .lang { margin-left: auto; }
}