/* Studio Savannah: feststehende Sprachumschaltung am rechten Seitenrand */
.lang-switch {
  position: fixed;
  top: 50%;
  right: 18px;
  transform: translateY(-50%);
  z-index: 80;
  display: flex;
  flex-direction: column;
  width: 48px;
  background: rgba(62, 68, 50, 0.96);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(242, 239, 233, 0.2);
  border-radius: 6px;
  box-shadow: 0 6px 24px rgba(30, 27, 22, 0.18);
}
.lang-switch__item {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  color: #F2EFE9;
  font-family: inherit;
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0.18em;
  text-indent: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  opacity: 0.65;
  transition: opacity 0.25s ease, background-color 0.25s ease;
}
.lang-switch__item + .lang-switch__item {
  border-top: 1px solid rgba(242, 239, 233, 0.16);
}
.lang-switch__item[aria-current="true"] {
  opacity: 1;
  cursor: default;
}
.lang-switch__item[aria-current="true"]::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 10px;
  width: 14px;
  height: 1px;
  background: currentColor;
  transform: translateX(-50%);
}
a.lang-switch__item { cursor: pointer; }
a.lang-switch__item:hover {
  opacity: 1;
  background-color: rgba(242, 239, 233, 0.1);
}
a.lang-switch__item:focus-visible {
  opacity: 1;
  outline: 1px solid #F2EFE9;
  outline-offset: -4px;
}
@media (max-width: 1023px) {
  /* Phones and tablets: the language link lives in the menu (a floating box would cover the text) */
  .lang-switch { display: none; }
}
#mobile-menu-overlay .space-y-8 > a:last-child {
  display: inline-block;
  margin-top: 1rem;
  padding: 0.85rem 2rem;
  border: 1px solid rgba(242, 239, 233, 0.35);
  border-radius: 4px;
  opacity: 1 !important;
  letter-spacing: 0.22em;
}
/* Header language switch for phones and tablets (the floating box is desktop only) */
.nav-lang { display: none; }
@media (max-width: 1023px) {
  .nav-lang {
    display: flex;
    flex-direction: column;
    position: absolute;
    left: 24px;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    border: 1px solid currentColor;
    color: #1E1B16;
    z-index: 50;
  }
  nav#navbar:not(.sticky) .nav-lang { color: #FFFFFF; }
  nav#navbar.bg-brand-olive .nav-lang { color: #F2EFE9; }
  /* Home: once the transparent header turns light while scrolling, the switch turns dark like the logo */
  nav#navbar.fixed .nav-lang { color: #1E1B16; }
}
/* Shared parts of the header language switch (phones, tablets and desktop) */
.nav-lang::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
  background: currentColor;
  opacity: 0.35;
}
.nav-lang__item {
  position: relative;
  flex: 1 1 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  line-height: 1;
  letter-spacing: 0.14em;
  text-indent: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  color: inherit;
  opacity: 0.55;
  transition: opacity 0.25s ease;
}
.nav-lang__item[aria-current="true"] { opacity: 1; }
.nav-lang__item[aria-current="true"]::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 3px;
  width: 12px;
  height: 1px;
  background: currentColor;
  transform: translateX(-50%);
}
a.nav-lang__item:hover { opacity: 1; }
a.nav-lang__item:focus-visible { opacity: 1; outline: 1px solid currentColor; outline-offset: -3px; }
@media (min-width: 768px) and (max-width: 1023px) {
  /* Tablets: the wordmark sits on the left, so the switch goes next to the menu button */
  .nav-lang { left: auto; right: 84px; }
}
@media (max-width: 380px) {
  .nav-lang { left: 14px; width: 40px; }
}

@media print { .lang-switch { display: none; } }

/* Navigation: Menüpunkte umbrechen oder überlaufen nicht (auch bei mittleren Fensterbreiten) */
@media (min-width: 1024px) {
  #navbar .nav-link { white-space: nowrap; }
}
@media (min-width: 1024px) and (max-width: 1365px) {
  #navbar { padding-left: 32px; padding-right: 32px; }
  #navbar > div.flex-1 > .nav-link { margin-left: 0 !important; margin-right: 0 !important; font-size: 11px; letter-spacing: 0.14em; }
  #header-logo-main { font-size: 26px; }
}

/* Desktop: the language switch sits in the top right corner of the navigation bar (compact box) */
@media (min-width: 1024px) {
  .lang-switch { display: none; }
  .nav-lang {
    display: flex;
    flex-direction: column;
    position: absolute;
    right: 24px;
    top: 50%;
    transform: translateY(-50%);
    width: 38px;
    height: 54px;
    z-index: 50;
    color: #F2EFE9;
    background: rgba(62, 68, 50, 0.96);
    border: 1px solid rgba(242, 239, 233, 0.2);
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(30, 27, 22, 0.14);
  }
  .nav-lang::before { opacity: 0.18; }
  .nav-lang__item { opacity: 0.65; font-size: 10px; }
  .nav-lang__item[aria-current="true"] { opacity: 1; }
  a.nav-lang__item:hover { background-color: rgba(242, 239, 233, 0.1); opacity: 1; }
}
@media (min-width: 1024px) and (max-width: 1199px) {
  .nav-lang { right: 12px; width: 34px; }
}
