/* ==========================================================
   ALLCOLOURS — Mehrfach-Rotator: mehrere Begriffe gleichzeitig sichtbar
   Modelle per data-model: focus-v | focus-h | drum | ring | all
   Jeder Begriff bekommt per JS --d (Abstand zum aktiven, -2…2) und --a (|d|);
   das Aussehen folgt rein aus diesen Werten.
   ========================================================== */
.mrot{
  position:relative;display:block;margin:0 auto;text-align:center;
  font-weight:500;color:var(--white,#f2f4f8);
}
.mrot__sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.mrot__it{
  position:absolute;left:0;right:0;top:50%;white-space:nowrap;text-align:center;
  transition:transform .8s cubic-bezier(.3,.7,.2,1),opacity .8s ease,filter .8s ease;
}

/* 1 · focus-v — drei Zeilen übereinander: oben/unten blass und unscharf */
.mrot--focus-v{height:4.5em}
.mrot--focus-v .mrot__it{
  transform:translateY(calc(-50% + var(--d) * 1.45em)) scale(calc(1 - var(--a) * .14));
  opacity:max(0,calc(1 - var(--a) * .66));
  filter:blur(calc(var(--a) * 2.4px));
}

/* 2 · focus-h — ein Band: links und rechts die Nachbarn, mit festem Abstand (per JS aus den
   tatsächlichen Wortbreiten), gut lesbar, zum Rand hin auslaufend */
.mrot--focus-h{
  height:1.6em;width:min(100%,44em);overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent);
}
.mrot--focus-h .mrot__it{
  left:50%;right:auto;
  transform:translate(calc(-50% + var(--x,0px)),-50%) scale(calc(1 - var(--a) * .1));
  opacity:max(0,calc(1 - var(--a) * .42));
  filter:blur(calc(var(--a) * 1.1px));
}

/* 3 · drum — senkrechte Walze (3D), wie ein Slot-Rad / Auswahl-Rad */
.mrot--drum{height:5.2em;perspective:34em}
.mrot--drum .mrot__it{
  transform:translateY(-50%) translateZ(-2.6em) rotateX(calc(var(--d) * -34deg)) translateZ(2.6em);
  opacity:max(0,calc(1 - var(--a) * .5));
  filter:blur(calc(var(--a) * 1.6px));
  backface-visibility:hidden;
}

/* 4 · ring — waagrechtes 3D-Karussell: Nachbarn drehen weg, werden kleiner und unscharf */
.mrot--ring{height:1.7em;width:min(100%,46em);perspective:50em;overflow:hidden}
.mrot--ring .mrot__it{
  transform:translateY(-50%) translateZ(-20em) rotateY(calc(var(--d) * 36deg)) translateZ(20em);
  opacity:max(0,calc(1 - var(--a) * .5));
  filter:blur(calc(var(--a) * 1.8px));
  backface-visibility:hidden;
}

/* 5 · all — alle Begriffe stehen da, nur die Hervorhebung wandert */
.mrot--all{display:flex;flex-wrap:wrap;justify-content:center;gap:.3em .45em;height:auto}
.mrot--all .mrot__it{
  position:static;transform:none;filter:none;opacity:.42;
  padding:.02em .6em .08em;border:1px solid transparent;border-radius:999px;
  transition:opacity .5s ease,color .5s ease,border-color .5s ease,background-color .5s ease;
}
.mrot--all .mrot__it.is-active{
  opacity:1;border-color:var(--magenta,#e8127d);background:rgba(232,18,125,.16);
}

@media (max-width:600px){
  .mrot--ring{--step:0;perspective:40em}
}
@media (prefers-reduced-motion:reduce){
  .mrot__it{transition:none!important}
}