/* =========================================================
   Musikschule Cuxhaven — Sprachumschalter DE/EN (eigenständiges Modul)
   Einbinden (zwei Zeilen):
     <link rel="stylesheet" href="/css/lang-switch.css">
     <script src="/js/lang-switch.js" defer></script>
   Reiht sich als dritter schwebender Knopf unter den Teilen-Button.
   ========================================================= */
:root{ --ms-lang-top: 250px; }

.ms-lang{
  position: fixed;
  top: var(--ms-lang-top);
  left: var(--ms-lang-left, auto);
  right: var(--ms-share-right, 20px);
  z-index: 80;
  width: var(--ms-share-size, 46px);
  height: var(--ms-share-size, 46px);
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line, #DDCDB6);
  border-radius: 50%;
  background: var(--paper, #F6EFE4);
  color: var(--brick, #A6432B);
  font-family: "Mulish", system-ui, -apple-system, sans-serif;
  font-weight: 800;
  font-size: .82rem;
  letter-spacing: .04em;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(42,33,27,.16);
  transition: background-color .2s ease, color .2s ease, border-color .2s ease,
              transform .15s ease, opacity .2s ease, visibility .2s ease;
}
.ms-lang:hover{ background: var(--brick, #A6432B); color: var(--paper, #F6EFE4); border-color: var(--brick, #A6432B); }
.ms-lang:focus-visible{ outline: 2px solid var(--brick, #A6432B); outline-offset: 3px; }
.ms-lang:active{ transform: scale(.94); }
.ms-lang .ms-lang-code{ display:block; line-height:1; }

[data-theme="dark"] .ms-lang{ box-shadow: 0 6px 18px rgba(0,0,0,.45); }

@media (max-width: 860px){
  body:has(.site-header.nav-open) .ms-lang{ opacity:0; visibility:hidden; }
}
@media (prefers-reduced-motion: reduce){
  .ms-lang{ transition: opacity .2s, visibility .2s; }
  .ms-lang:active{ transform: none; }
}
@media print{ .ms-lang{ display:none !important; } }