/* Wechselschalter Studio | Casa
   Wiederverwendbare Komponente fuer beide Seiten. Siehe WECHSELSCHALTER.md.
   Dunkle Variante (Standard, Casa): aktive Seite weiss mit schwarzer Schrift.
   Helle Variante (Studio): aktive Seite schwarz mit weisser Schrift.
   Gleiche Masse in beiden Varianten, nur die Farben sind gespiegelt. */
.ws {
  --ws-ink: #FFFFFF;
  --ws-ink-dim: #A8A8A8;
  --ws-on: #FFFFFF;
  --ws-on-ink: #0E0E0E;
  --ws-line: rgba(255, 255, 255, .4);
  position: relative;
  display: inline-flex;
  align-items: stretch;
  height: 34px;
  border: 1px solid var(--ws-line);
  font-family: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
  font-size: var(--t-label, 10.5px);
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
  border-radius: 0;
}
.ws--hell {
  --ws-ink: #111111;
  --ws-ink-dim: #5E5E5E;
  --ws-on: #111111;
  --ws-on-ink: #FFFFFF;
  --ws-line: rgba(0, 0, 0, .4);
}
.ws a {
  display: inline-flex;
  align-items: center;
  padding: 0 14px;
  color: var(--ws-ink-dim);
  text-decoration: none;
  position: relative;
  z-index: 1;
  transition: color .4s cubic-bezier(0.16, 1, 0.3, 1), background-color .2s;
}
.ws a + a { border-left: 1px solid var(--ws-line); }
.ws a:hover { color: var(--ws-ink); }
.ws a[aria-current="page"] {
  background: var(--ws-on);
  color: var(--ws-on-ink);
  cursor: default;
}
.ws a:focus-visible { outline: 2px solid var(--ws-ink); outline-offset: 2px; }
/* Auswahl schiebt weich um (Zusatz, vom Skript beim ersten Hover aufgebaut) */
.ws-i { position: absolute; top: 0; bottom: 0; left: 0; width: 1px; background: var(--ws-on); transform-origin: left center; transition: transform .5s cubic-bezier(0.16, 1, 0.3, 1); pointer-events: none; z-index: 0; }
.ws--i a, .ws--i a[aria-current="page"] { background: transparent; color: var(--ws-ink-dim); }
.ws--i a.is-sel, .ws--i a[aria-current="page"].is-sel { color: var(--ws-on-ink); }
@media (max-width: 480px) {
  .ws { height: 32px; }
  .ws a { padding: 0 11px; }
}
@media (prefers-reduced-motion: reduce) { .ws a, .ws-i { transition: none; } }
/* V2 Übergang nur auf der Startseite, ohne Kopfleisten-Kopie. */
.casa-welle { position:fixed; inset:0; z-index:999; background:#fff; pointer-events:none; }
.casa-welle[hidden] { display:none; }
@media(prefers-reduced-motion:reduce) { .casa-welle { display:none; } }

/* Studio-Seite (6.10.2026): auf schmalen Bildschirmen nicht in der Kopfleiste, sondern im Handy-Menü */
.nav-right .ws { margin-right: 16px; }
.mobile-menu .ws { margin: 28px 0 0; }
@media (max-width: 1279px) { .nav-right .ws { display: none; } }
@media (min-width: 900px) { .mobile-menu .ws { display: none; } }