/* Ausstattungslinien-Umschalter (switcher.js). Liegt zwischen Bühne (z 10) und Text (z 20) der Engine. */
.vs-layer { position: fixed; inset: 0; z-index: 15; pointer-events: none; }
.vs-station { position: absolute; inset: 0; visibility: hidden; }
/* exactly the engine's video framing, so the still sits on the hold frame pixel for pixel */
.vs-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 42%;
  opacity: 0; transition: opacity .35s ease; }
@media (max-width: 860px) { .vs-img { object-position: center 46%; } }
@media (max-width: 860px) and (orientation: portrait) { .vs-img { object-position: center 44%; } }

.vs-ctl { position: fixed; z-index: 45; right: clamp(56px, 7vw, 96px); bottom: clamp(24px, 6vh, 56px);
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px; max-width: min(92vw, 420px);
  padding: 8px; border-radius: 16px; background: color-mix(in srgb, var(--sw-bg) 88%, transparent);
  backdrop-filter: blur(10px); box-shadow: 0 8px 28px rgba(27, 28, 30, .14); opacity: 0;
  font: 500 .9rem/1.2 var(--sw-font-body, system-ui, sans-serif); color: var(--sw-ink); }
.vs-ctl__cap { width: 100%; padding: 2px 8px 4px; font-size: .74rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--sw-ink-soft); }
.vs-ctl__btn { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 16px;
  border: 1.5px solid transparent; border-radius: 999px; background: transparent; color: inherit; font: inherit;
  cursor: pointer; }
.vs-ctl__btn[aria-checked="true"] { background: var(--sw-ink); color: var(--sw-bg); }
.vs-ctl__btn:focus-visible { outline: 3px solid var(--sw-accent); outline-offset: 2px; }
.vs-ctl__sw { width: 14px; height: 14px; border-radius: 50%; background: var(--vs-sw);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .18); }
.vs-ctl__note { width: 100%; margin: 4px 8px 2px; font-size: .78rem; color: var(--sw-ink-soft); }
@media (max-width: 860px) {
  .vs-ctl { left: 12px; right: 12px; top: calc(64px + env(safe-area-inset-top)); bottom: auto; max-width: none; }
}
@media (prefers-reduced-motion: reduce) { .vs-img { transition: none; } }

/* Kennzeichnung (standards.md §5): immer sichtbar, über der Fahrt */
.vs-mark { position: fixed; z-index: 44; left: clamp(18px, 5vw, 64px); bottom: 10px; margin: 0;
  font: .74rem/1.3 var(--sw-font-body, system-ui, sans-serif); color: var(--sw-ink-soft); pointer-events: none; }
@media (max-width: 860px) { .vs-mark { bottom: calc(6px + env(safe-area-inset-bottom)); left: 12px; right: 12px; } }