/* Umschalter der vier Fassungen und Vorschau-Marke. Gemeinsam fuer index.html (Neko), dentora.html, alder.html, lyst.html. */
.vs-pille{position:fixed;left:50%;bottom:20px;z-index:2147483000;display:flex;align-items:center;gap:4px;padding:4px;
  transform:translate(-50%,0);border-radius:999px;background:rgba(18,18,18,.78);-webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);box-shadow:0 0 0 1px rgba(255,255,255,.12);font:500 13px/1 system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  color:#fff;letter-spacing:0;transition:opacity .35s ease,transform .35s ease;-webkit-font-smoothing:antialiased}
.vs-pille.is-weg{opacity:0;visibility:hidden;transform:translate(-50%,16px);pointer-events:none;transition:opacity .35s ease,transform .35s ease,visibility 0s .35s}
.vs-pille__marke{padding:0 12px 0 14px;color:rgba(255,255,255,.72);white-space:nowrap}
.vs-pille a{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 14px;border-radius:999px;color:#fff;
  text-decoration:none;white-space:nowrap}
.vs-pille a b{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;font-weight:600;font-size:11px;
  background:rgba(255,255,255,.14)}
.vs-pille a[aria-current="page"]{background:#fff;color:#0B0B0B}
.vs-pille a[aria-current="page"] b{background:#C8A96B;color:#0B0B0B}
.vs-pille a:focus-visible{outline:2px solid #C8A96B;outline-offset:2px}
@media (hover:hover){.vs-pille a:not([aria-current="page"]):hover{background:rgba(255,255,255,.12)}}
@media (max-width:560px){.vs-pille__marke{display:none}.vs-pille a{padding:0 11px}}
@media (prefers-reduced-motion:reduce){.vs-pille{transition:none}}
@media (max-width:400px){.vs-pille{gap:2px}.vs-pille a{padding:0 9px;gap:5px}}