/* Eine gemeinsame Farbfläche statt zweier einzeln eingefärbter Buttons. */
.mf-area-switch{
  --switch-pad:4px;
  --switch-index:0;
  position:relative;
  isolation:isolate;
  display:inline-grid;
  grid-template-columns:1fr 1fr;
  gap:0;
  padding:var(--switch-pad);
  min-width:184px;
  border-radius:999px;
  overflow:hidden;
  background:var(--cream);
}
.mf-area-switch[data-position="1"]{--switch-index:1}
.mf-switch-fill{
  pointer-events:none;
  position:absolute;
  z-index:0;
  top:var(--switch-pad);
  bottom:var(--switch-pad);
  left:var(--switch-pad);
  width:calc((100% - 2 * var(--switch-pad)) / 2);
  border-radius:999px;
  background:var(--olive);
  transform:translateX(calc(var(--switch-index) * 100%));
  transform-origin:center;
}
.mf-area-switch a{
  position:relative;
  z-index:1;
  text-align:center;
  background:transparent;
  color:var(--ink);
  border-radius:999px;
  padding:10px 15px;
  transition:color 90ms linear;
}
.mf-area-switch a:hover,.mf-area-switch a[aria-current]{background:transparent;color:var(--ink)}
.mf-area-switch:not([data-switch-ready])[data-position="0"] a[data-switch-index="0"],
.mf-area-switch:not([data-switch-ready])[data-position="1"] a[data-switch-index="1"],
.mf-area-switch a.is-inked,.mf-area-switch a.is-inked:hover{color:var(--cream)}
.mf-area-switch a:focus-visible{outline:2px solid var(--clay);outline-offset:-3px}
@media(max-width:1100px){.mf-area-switch{min-width:160px}.mf-area-switch a{padding:9px 12px}}
@media(max-width:700px){.mf-area-switch{--switch-pad:3px;min-width:116px}.mf-area-switch a{padding:8px 9px;font-size:10px}}
@media(max-width:380px){.mf-area-switch{min-width:112px}.mf-area-switch a{padding:8px 7px}}
@media(max-width:440px){
  .mf-area-switch{grid-template-columns:repeat(2,minmax(0,1fr));min-width:0;width:100%}
  .mf-area-switch a{display:flex;align-items:center;justify-content:center;padding:8px 4px;white-space:normal}
}
@media(prefers-reduced-motion:reduce){.mf-area-switch a{transition:none}}