/* Die Zelle und ihre Organellen – alles aus CSS-Geometrie (Gradients, border-radius, clip-path).
   Der wabernde Umriss der Zellhaut wird von js/membrane.js als clip-path gesetzt. */
:root { --hue: 170; }

#cell {
  position: absolute; left: 0; top: 0; width: 300px; height: 300px;
  pointer-events: none; will-change: transform; z-index: 3;
}

.cell-glow {
  position: absolute; inset: -34px; border-radius: 50%;
  background: radial-gradient(circle closest-side, transparent 70%, hsl(var(--hue) 85% 62% / .34) 82%, hsl(var(--hue) 85% 62% / .1) 92%, transparent 100%);
  animation: glow 5s ease-in-out infinite;
}
@keyframes glow { 50% { scale: 1.05; opacity: .72; } }

/* Membran: die Hülle ist die fettige Mitte der Doppelschicht, .lh sind die Köpfchen der Lipide (innen und außen) */
.cell-body {
  position: absolute; inset: -30px;
  background: linear-gradient(145deg, hsl(var(--hue) 72% 91%), hsl(var(--hue) 55% 72%));
}
.lipids { position: absolute; inset: 0; }
.lh { position: absolute; left: 0; top: 0; width: 8px; height: 8px; border-radius: 50%; }
.lh.o { background: radial-gradient(circle at 35% 30%, hsl(var(--hue) 90% 78%), hsl(var(--hue) 78% 36%)); box-shadow: 0 0 0 1px hsl(var(--hue) 70% 26% / .55); }
.lh.n { background: radial-gradient(circle at 35% 30%, hsl(var(--hue) 85% 84%), hsl(var(--hue) 70% 46%)); box-shadow: 0 0 0 1px hsl(var(--hue) 70% 30% / .45); }

/* Zytoplasma */
.cell-in, .cell-fill {
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 37% 31%, rgba(255, 255, 255, .42), transparent 42%),
    radial-gradient(circle closest-side at 50% 50%, hsl(var(--hue) 64% 91% / .98) 0, hsl(var(--hue) 52% 83% / .97) 58%, hsl(var(--hue) 48% 68%) 70%, hsl(var(--hue) 50% 58%) 100%);
}
.cell-fill { display: none; }                                      /* nur im Zell-Rundgang: füllt sich von der Mitte aus */
.cell-in::after {                                                  /* Infektion: violette Schlieren */
  content: ""; position: absolute; inset: 0; opacity: 0; transition: opacity .6s;
  background: radial-gradient(circle closest-side, transparent 52%, rgba(150, 50, 210, .5) 74%);
}
#cell.infected .cell-in::after { opacity: 1; animation: sickPulse 1.3s ease-in-out infinite; }
#cell.infected .cell-glow { filter: hue-rotate(115deg) saturate(1.4); animation: glow 1.3s ease-in-out infinite; }
@keyframes sickPulse { 50% { opacity: .45; } }
#cell.tired .cell-in { filter: saturate(.55) brightness(.94); }

/* Zell-Rundgang (js/tour.js): erst nur die Haut, dann Türen, Zytoplasma und Zellkern */
#cell.touring.t-hide { opacity: 0; }
#cell.t-grow { animation: tourGrow 2.2s cubic-bezier(.25, .6, .3, 1); }
@keyframes tourGrow { from { scale: .4; opacity: 0; } }
#cell.touring .org.pop { --pop: pop 2s ease-out; }
#cell.touring .cell-in { background: rgba(12, 18, 56, .5); }
#cell.touring .cell-fill { display: block; clip-path: circle(0% at 50% 50%); transition: clip-path 2.4s ease-in-out; }
#cell.touring.t-cyto .cell-fill { clip-path: circle(75% at 50% 50%); }
#cell.touring:not(.t-cyto) .cell-cyto, #cell.touring:not(.t-cyto) .cell-stream { opacity: 0; }
#cell.touring:not(.t-chans) #chans { opacity: 0; scale: .9; }
#chans { transition: opacity 1.5s, scale 1.5s; }
#cell.t-chanspot .chan { animation: chanSpot 4s ease-in-out infinite; }
@keyframes chanSpot { 50% { scale: 1.18 1.08; filter: brightness(1.1) drop-shadow(0 0 3px rgba(255, 255, 255, .55)); } }

.cell-cyto {                                                       /* Zytoskelett */
  position: absolute; inset: 48px; border-radius: 50%; opacity: .5; animation: spinSlow 120s linear infinite; transition: opacity 1.4s;
  background: repeating-conic-gradient(from 8deg at 50% 50%, transparent 0 13deg, rgba(255, 255, 255, .5) 13deg 14deg);
  -webkit-mask-image: radial-gradient(circle, transparent 28%, #000 95%);
  mask-image: radial-gradient(circle, transparent 28%, #000 95%);
}
.cell-stream {                                                     /* strömende Körnchen im Zytoplasma */
  position: absolute; inset: -30px; opacity: .5; animation: spinSlow 70s linear infinite reverse; transition: opacity 1.4s;
  background:
    radial-gradient(circle, rgba(255, 255, 255, .95) 1.3px, transparent 2px) 0 0 / 27px 27px,
    radial-gradient(circle, rgba(255, 255, 255, .7) 1px, transparent 1.7px) 13px 9px / 37px 37px,
    radial-gradient(circle, hsl(var(--hue) 70% 40% / .45) 1.4px, transparent 2px) 5px 19px / 43px 43px;
}
@keyframes spinSlow { to { rotate: 360deg; } }
.orgs { position: absolute; inset: 0; }

/* Transportproteine auf der Membran (der Radius --rr kommt aus js/cell.js und folgt der Zellhaut) */
#chans { position: absolute; inset: 0; }
.chan {
  position: absolute; left: 50%; top: 50%; width: 12px; height: 26px; margin: -13px 0 0 -6px;
  transform: rotate(var(--a)) translateY(calc(var(--rr, 136) * -1px));
  border-radius: 6px; border: 2px solid #9a5b10;
  background: linear-gradient(90deg, #ffd166, #f4a53a);
  animation: chanPulse 8s ease-in-out var(--dl, 0s) infinite;
}
.chan::after { content: ""; position: absolute; left: 50%; top: 3px; bottom: 3px; width: 3px; margin-left: -1.5px; background: rgba(0, 0, 0, .35); border-radius: 2px; }
.chan.pump { width: 16px; margin-left: -8px; border-color: #4a2e96; background: linear-gradient(90deg, #c9a7ff, #8a63e0); animation-name: pumpPulse; animation-duration: 6s; }
@keyframes chanPulse { 50% { scale: 1.12 1; } }
@keyframes pumpPulse { 50% { scale: 1.06 .95; } }

/* ---------- Organellen ----------
   Jedes Organell schwebt leicht (drift), gestaltet sich langsam um (--morph) und leuchtet, solange es arbeitet (--work).
   Welche arbeiten, setzt js/cell.js als data-w am Container #orgs. */
.org {
  position: absolute; left: 50%; top: 50%; display: block; font-style: normal;
  width: var(--w); height: var(--h);
  margin: calc(var(--h) / -2) 0 0 calc(var(--w) / -2);
  translate: var(--x, 0px) var(--y, 0px);
  rotate: var(--rot, 0deg);
  animation: drift var(--dur, 9s) ease-in-out var(--dl, 0s) infinite, var(--morph, none), var(--work, none), var(--pop, none);
}
.org b { position: absolute; display: block; }
.org.pop { --pop: pop .7s cubic-bezier(.2, 1.7, .4, 1); }
@keyframes pop { from { scale: 0; opacity: 0; } }
@keyframes drift {
  0%, 100% { translate: var(--x, 0px) var(--y, 0px); rotate: var(--rot, 0deg); }
  50% { translate: calc(var(--x, 0px) + var(--dx, 3px)) calc(var(--y, 0px) + var(--dy, -3px)); rotate: calc(var(--rot, 0deg) + var(--dr, 5deg)); }
}
@keyframes blobSmall {
  0%, 100% { border-radius: 50% 50% 50% 50% / 50% 50% 50% 50%; }
  33% { border-radius: 56% 44% 48% 52% / 46% 56% 44% 54%; }
  66% { border-radius: 46% 54% 56% 44% / 54% 44% 56% 46%; }
}
@keyframes mitoWork { 50% { scale: 1.08; filter: brightness(1.22) drop-shadow(0 0 5px rgba(255, 214, 90, .95)); } }
@keyframes glowWork { 50% { filter: brightness(1.18) drop-shadow(0 0 5px rgba(255, 255, 255, .9)); } }
@keyframes lysoWork { 50% { scale: 1.14; filter: brightness(1.15); } }

/* Zellkern: wabernde Doppelmembran, Kernporen, Chromatin-Fäden, Nukleolus */
.org-nucleus {
  --w: 100px; --h: 88px; --morph: nucMorph 13s ease-in-out var(--dl, 0s) infinite;
  border-radius: 58% 42% 52% 48% / 46% 58% 42% 54%;
  background: radial-gradient(circle at 38% 30%, #a79cf2, #5c4bbb 62%, #3c2f8e);
  border: 5px double #dcd6ff;
  box-shadow: 0 0 0 2px rgba(60, 40, 140, .5), inset 0 0 16px rgba(20, 10, 80, .55);
}
@keyframes nucMorph {
  0%, 100% { border-radius: 58% 42% 52% 48% / 46% 58% 42% 54%; }
  25% { border-radius: 44% 56% 40% 60% / 60% 42% 58% 40%; }
  50% { border-radius: 62% 38% 58% 42% / 42% 60% 40% 58%; }
  75% { border-radius: 40% 60% 50% 50% / 54% 44% 56% 46%; }
}
.org-nucleus::before {                                             /* Chromatin: unregelmäßige Wolken */
  content: ""; position: absolute; inset: 4px; border-radius: inherit;
  background:
    radial-gradient(ellipse 15px 9px at 28% 36%, rgba(232, 226, 255, .36), transparent 72%),
    radial-gradient(ellipse 10px 15px at 68% 28%, rgba(232, 226, 255, .3), transparent 72%),
    radial-gradient(ellipse 17px 8px at 64% 72%, rgba(232, 226, 255, .32), transparent 72%),
    radial-gradient(ellipse 9px 13px at 26% 70%, rgba(232, 226, 255, .26), transparent 72%),
    repeating-radial-gradient(circle at 58% 54%, transparent 0 5px, rgba(225, 220, 255, .16) 5px 6px);
}
.org-nucleus::after {                                              /* Kernporen */
  content: ""; position: absolute; inset: -9px; border-radius: inherit;
  border: 3px dotted rgba(240, 236, 255, .85);
}
.org-nucleus .nucleolus {
  left: 55%; top: 47%; width: 28px; height: 25px; margin: -12px 0 0 -14px; border-radius: 55% 45% 50% 50% / 50% 55% 45% 50%;
  background: radial-gradient(circle at 35% 30%, #ffd0e6, #d4408c 80%); animation: blobSmall 6s ease-in-out infinite;
}
.org-nucleus .thread {
  width: 44px; height: 24px; border: 2px solid transparent; border-top-color: rgba(238, 232, 255, .55); border-radius: 50%;
}
.org-nucleus .t1 { left: 8px; top: 12px; rotate: 20deg; animation: spinSlow 38s linear infinite; }
.org-nucleus .t2 { left: 26px; top: 40px; width: 36px; height: 20px; rotate: 200deg; animation: spinSlow 30s linear infinite reverse; }
#orgs[data-w~="nucleus"] .org-nucleus { --work: glowWork 1.5s ease-in-out infinite; }

/* Ribosom: große + kleine Untereinheit */
.org-ribosome { --w: 17px; --h: 15px; }
.org-ribosome::before {
  content: ""; position: absolute; left: 0; top: 4px; width: 12px; height: 11px; border-radius: 52% 48% 55% 45% / 55% 50% 50% 45%;
  background: radial-gradient(circle at 35% 30%, #3d7ca9, #17384f); box-shadow: 0 0 0 1px rgba(255, 255, 255, .55);
}
.org-ribosome::after {
  content: ""; position: absolute; right: 0; top: 0; width: 9px; height: 8px; border-radius: 50% 50% 45% 55%;
  background: radial-gradient(circle at 35% 30%, #aad6f1, #4c8bb3); box-shadow: 0 0 0 1px rgba(255, 255, 255, .55);
}
#orgs[data-w~="ribosome"] .org-ribosome::after { animation: ribBob .45s ease-in-out infinite alternate; }
#orgs[data-w~="ribosome"] .org-ribosome::before { animation: ribGlow .9s ease-in-out infinite; }
@keyframes ribBob { to { translate: -1px 2px; rotate: -10deg; } }
@keyframes ribGlow { 50% { filter: brightness(1.7); } }

/* Mitochondrium: Bohnenform mit Doppelmembran und gefalteten Cristae */
.org-mitochondrion {
  --w: 60px; --h: 32px; --morph: bean 9s ease-in-out var(--dl, 0s) infinite; overflow: hidden;
  border-radius: 54% 46% 48% 52% / 64% 60% 40% 36%;
  background: linear-gradient(#fbb68e, #e5693c); border: 3px solid #a3401f;
  box-shadow: inset 0 0 0 2px rgba(255, 230, 210, .5);
}
@keyframes bean {
  0%, 100% { border-radius: 54% 46% 48% 52% / 64% 60% 40% 36%; }
  33% { border-radius: 46% 54% 56% 44% / 58% 66% 34% 42%; }
  66% { border-radius: 58% 42% 44% 56% / 68% 54% 46% 32%; }
}
.org-mitochondrion .cristae { inset: 0; border-radius: inherit; }
.org-mitochondrion .cristae::before, .org-mitochondrion .cristae::after {
  content: ""; position: absolute; left: 0; right: 0; height: 62%;
}
.org-mitochondrion .cristae::before { top: 0; background: repeating-linear-gradient(97deg, transparent 0 5px, #9a3a17 5px 7px, transparent 7px 12px, #9a3a17 12px 13px); border-radius: 0 0 7px 7px; }
.org-mitochondrion .cristae::after { bottom: 0; background: repeating-linear-gradient(83deg, transparent 0 6px, #9a3a17 6px 8px, transparent 8px 11px, #9a3a17 11px 12px); background-position: 4px 0; border-radius: 7px 7px 0 0; }
#orgs[data-w~="mitochondrion"] .org-mitochondrion { --work: mitoWork 1s ease-in-out infinite; }

/* Raues ER: gewellte Säcke, besetzt mit Ribosomen */
.org-rer { --w: 74px; --h: 48px; }
.org-rer b {
  left: 0; right: 0; height: 12px; border-radius: 12px 18px 12px 16px / 100%;
  background: linear-gradient(#7bc8b8, #4fa595); border: 2px solid #2d6d62; animation: sacWave 5s ease-in-out infinite;
}
.org-rer b:nth-child(1) { top: 0; margin: 0 10px 0 6px; rotate: -2deg; }
.org-rer b:nth-child(2) { top: 17px; margin: 0 0 0 11px; rotate: 1.5deg; animation-delay: -1.7s; }
.org-rer b:nth-child(3) { top: 35px; margin: 0 6px 0 3px; rotate: -1deg; animation-delay: -3.4s; }
.org-rer::after { content: ""; position: absolute; left: -2px; top: 5px; width: 10px; height: 40px; border: 2px solid #2d6d62; border-right: 0; border-radius: 12px 0 0 12px; }
.org-rer b::before {
  content: ""; position: absolute; inset: -3px 5px;
  background:
    radial-gradient(circle at 50% 0, #1f3142 2.4px, transparent 3px) 0 0 / 9px 100%,
    radial-gradient(circle at 50% 100%, #1f3142 2.4px, transparent 3px) 0 0 / 9px 100%;
}
@keyframes sacWave { 50% { scale: 1.03 1.22; } }
#orgs[data-w~="rer"] .org-rer { --work: glowWork 1.3s ease-in-out infinite; }

/* Glattes ER: Röhrennetz ohne Ribosomen, die Röhren winden sich */
.org-ger { --w: 62px; --h: 44px; }
.org-ger b { height: 9px; border-radius: 9px; background: #c9e57e; border: 2px solid #7d9a2b; animation: tubeWiggle 4.5s ease-in-out infinite alternate; }
.org-ger b:nth-child(1) { left: 0; top: 3px; width: 44px; --r0: 8deg; }
.org-ger b:nth-child(2) { left: 14px; top: 17px; width: 46px; --r0: -10deg; animation-delay: -1.2s; }
.org-ger b:nth-child(3) { left: 2px; top: 32px; width: 40px; --r0: 6deg; animation-delay: -2.4s; }
.org-ger b:nth-child(4) { left: 24px; top: 1px; width: 9px; height: 38px; --r0: 18deg; animation-delay: -3.3s; }
.org-ger::before, .org-ger::after { content: ""; position: absolute; width: 11px; height: 11px; border-radius: 50%; background: #c9e57e; border: 2px solid #7d9a2b; }
.org-ger::before { left: 24px; top: 15px; }
.org-ger::after { left: 4px; top: 29px; }
@keyframes tubeWiggle { from { rotate: var(--r0, 0deg); } to { rotate: calc(var(--r0, 0deg) + 7deg); } }
#orgs[data-w~="ger"] .org-ger { --work: glowWork 1.3s ease-in-out infinite; }

/* Golgi-Apparat: gestapelte, gebogene Zisternen; am Rand knospen Vesikel ab */
.org-golgi { --w: 68px; --h: 52px; }
.org-golgi b {
  left: 50%; height: 10px; translate: -50% 0; border: 2px solid #b87a12; border-top: 0;
  background: linear-gradient(#ffe08a, #f0a830); border-radius: 0 0 50% 50% / 0 0 12px 12px;
}
.org-golgi b:nth-child(1) { top: 2px; width: 54px; rotate: -2deg; }
.org-golgi b:nth-child(2) { top: 13px; width: 61px; rotate: 1.5deg; }
.org-golgi b:nth-child(3) { top: 24px; width: 63px; rotate: -1deg; }
.org-golgi b:nth-child(4) { top: 35px; width: 54px; rotate: 2deg; }
.org-golgi::before, .org-golgi::after { content: ""; position: absolute; width: 8px; height: 8px; border-radius: 50%; background: #ffd27a; border: 2px solid #b87a12; }
.org-golgi::before { left: -4px; top: 6px; animation: bud 4s ease-in infinite; }
.org-golgi::after { right: -4px; top: 30px; animation: budR 4s ease-in -2s infinite; }
@keyframes bud { 0% { scale: .2; opacity: 0; translate: 5px 0; } 25% { scale: 1; opacity: 1; translate: 0 0; } 100% { scale: 1; opacity: 0; translate: -15px -7px; } }
@keyframes budR { 0% { scale: .2; opacity: 0; translate: -5px 0; } 25% { scale: 1; opacity: 1; translate: 0 0; } 100% { scale: 1; opacity: 0; translate: 15px 7px; } }
#orgs[data-w~="golgi"] .org-golgi { --work: glowWork 1.2s ease-in-out infinite; }
#orgs[data-w~="golgi"] .org-golgi::before, #orgs[data-w~="golgi"] .org-golgi::after { animation-duration: 1.7s; }

/* Lysosom: Bläschen mit Verdauungsenzymen, innen körnig und in Bewegung */
.org-lysosome {
  --w: 28px; --h: 28px; --morph: blobSmall 6s ease-in-out var(--dl, 0s) infinite; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ffbcb0, #e0584a); border: 3px solid #a8372b;
}
.org-lysosome b { inset: 4px; border-radius: 50%; background: radial-gradient(circle, #7a1d14 1.5px, transparent 2px) 0 0 / 6px 6px; animation: spinSlow 14s linear infinite; }
#orgs[data-w~="lysosome"] .org-lysosome { --work: lysoWork .8s ease-in-out infinite; }

/* Zentriolen: zwei rechtwinklige Röhrchen aus Mikrotubuli-Tripletts */
.org-centriole { --w: 26px; --h: 26px; --dr: 14deg; }
.org-centriole b { border-radius: 3px; border: 1px solid #5a3f12; }
.org-centriole b:nth-child(1) { left: 0; top: 14px; width: 26px; height: 10px; background: repeating-linear-gradient(90deg, #7a5a2b 0 3px, #e3c27e 3px 6px); }
.org-centriole b:nth-child(2) { left: 8px; top: 0; width: 10px; height: 14px; background: repeating-linear-gradient(0deg, #7a5a2b 0 3px, #e3c27e 3px 6px); }

/* Phagosom (aufgenommenes Virus oder Bakterium) */
#vesicles { position: absolute; inset: 0; }
.vesicle {
  --p: 0; position: absolute; width: 40px; height: 40px; margin: -20px 0 0 -20px; border-radius: 50%;
  display: grid; place-items: center; border: 3px solid rgba(255, 255, 255, .85);
  background: conic-gradient(rgba(224, 88, 74, .75) calc(var(--p) * 1turn), rgba(255, 255, 255, .35) 0);
  animation: blobSmall 2.2s ease-in-out infinite;
}
.vesicle .virus, .vesicle .bact { opacity: calc(1 - var(--p)); scale: calc(1 - var(--p) * .5); animation: none; }
.vesicle .bact b, .vesicle .bact span { animation: none; }

/* ---------- Mitose-Animation ---------- */
.mstage { position: relative; width: min(440px, 100%); height: 270px; margin: 6px auto 4px; }
.mstage i { position: absolute; display: block; font-style: normal; }
.mc {
  left: 50%; top: 50%; width: 210px; height: 210px; margin: -105px 0 0 -105px; border-radius: 52% 48% 50% 50% / 48% 53% 47% 52%;
  border: 6px dotted hsl(170 72% 50%); background: radial-gradient(circle at 40% 35%, rgba(190, 245, 232, .35), rgba(94, 200, 180, .2));
  transition: translate 1.4s ease, opacity 1s ease, scale 1.4s ease; animation: mcMorph 6s ease-in-out infinite;
}
@keyframes mcMorph {
  0%, 100% { border-radius: 52% 48% 50% 50% / 48% 53% 47% 52%; }
  33% { border-radius: 47% 53% 54% 46% / 54% 46% 55% 45%; }
  66% { border-radius: 54% 46% 46% 54% / 46% 55% 45% 54%; }
}
.mc.a, .mc.b { opacity: 0; width: 190px; height: 190px; margin: -95px 0 0 -95px; }
.nuc {
  left: 50%; top: 50%; width: 104px; height: 104px; margin: -52px 0 0 -52px; border-radius: 54% 46% 52% 48% / 48% 54% 46% 52%;
  border: 4px double #d5cfff; background: rgba(120, 108, 215, .55); transition: opacity 1s ease, translate 1.4s ease, scale 1.4s ease;
  animation: nucMorph 9s ease-in-out infinite;
}
.nuc.a, .nuc.b { opacity: 0; width: 70px; height: 70px; margin: -35px 0 0 -35px; }
.spin {
  left: 50%; top: 50%; width: 250px; height: 130px; margin: -65px 0 0 -125px; opacity: 0; transition: opacity 1s;
  background: repeating-linear-gradient(0deg, transparent 0 11px, rgba(255, 255, 255, .5) 11px 12px);
  clip-path: ellipse(50% 50% at 50% 50%);
}
.chr { left: 50%; top: 50%; width: 30px; height: 44px; margin: -22px 0 0 -15px; translate: var(--x0) var(--y0); opacity: .35; transition: translate 1.4s ease, opacity 1s; }
.chr b { position: absolute; top: 0; width: 8px; height: 44px; border-radius: 5px; background: #ff7fa8; box-shadow: 0 0 0 1px #8f1c55; transition: translate 1.4s ease, rotate 1.4s ease; }
.chr b:nth-child(1) { left: 5px; rotate: 14deg; }
.chr b:nth-child(2) { left: 17px; rotate: -14deg; }
.pole { position: absolute; top: 50%; left: 50%; margin: -13px 0 0 -13px; transition: translate 1.4s ease, opacity 1s; }
.pole .org { position: relative; left: auto; top: auto; margin: 0; translate: none; rotate: none; }
.pole.l { translate: -16px -62px; }
.pole.r { translate: 16px -62px; }

/* Phase 0: Prophase – Chromosomen verdichten sich, Kernhülle löst sich */
.mstage[data-phase="0"] .nuc { opacity: .45; }
.mstage[data-phase="0"] .chr { opacity: 1; }
/* Phase 1: Metaphase – Äquatorialebene */
.mstage[data-phase="1"] .nuc, .mstage[data-phase="2"] .nuc { opacity: 0; }
.mstage:not([data-phase="0"]) .chr { translate: 0 var(--ym); opacity: 1; }
.mstage[data-phase="1"] .chr { translate: 0 var(--ym); }
.mstage:not([data-phase="0"]) .pole.l { translate: -112px 0; }
.mstage:not([data-phase="0"]) .pole.r { translate: 112px 0; }
.mstage[data-phase="1"] .spin, .mstage[data-phase="2"] .spin { opacity: 1; }
.mstage[data-phase="1"] .chr, .mstage[data-phase="2"] .chr { /* Spindel-Ausrichtung: Chromosomen liegen senkrecht zur Spindelachse */ rotate: 0deg; }
/* Phase 2: Anaphase – Chromatiden werden zu den Polen gezogen */
.mstage[data-phase="2"] .chr b:nth-child(1), .mstage[data-phase="3"] .chr b:nth-child(1), .mstage[data-phase="4"] .chr b:nth-child(1) { translate: -62px 0; rotate: 0deg; }
.mstage[data-phase="2"] .chr b:nth-child(2), .mstage[data-phase="3"] .chr b:nth-child(2), .mstage[data-phase="4"] .chr b:nth-child(2) { translate: 62px 0; rotate: 0deg; }
.mstage[data-phase="2"] .chr { translate: 0 var(--ym); }
.mstage[data-phase="2"] .whole { scale: 1.14 1; }
/* Phase 3: Telophase – neue Kerne, Spindel verschwindet */
.mstage[data-phase="3"] .whole, .mstage[data-phase="4"] .whole { opacity: 0; }
.mstage[data-phase="3"] .mc.a, .mstage[data-phase="4"] .mc.a { opacity: 1; translate: -62px 0; }
.mstage[data-phase="3"] .mc.b, .mstage[data-phase="4"] .mc.b { opacity: 1; translate: 62px 0; }
.mstage[data-phase="3"] .nuc.a, .mstage[data-phase="4"] .nuc.a { opacity: .9; translate: -62px 0; }
.mstage[data-phase="3"] .nuc.b, .mstage[data-phase="4"] .nuc.b { opacity: .9; translate: 62px 0; }
.mstage[data-phase="3"] .nuc:not(.a):not(.b), .mstage[data-phase="4"] .nuc:not(.a):not(.b) { opacity: 0; }
.mstage[data-phase="3"] .chr, .mstage[data-phase="4"] .chr { opacity: .4; }
.mstage[data-phase="3"] .chr b, .mstage[data-phase="4"] .chr b { height: 30px; top: 7px; }
.mstage[data-phase="3"] .spin, .mstage[data-phase="4"] .spin { opacity: 0; }
.mstage[data-phase="3"] .pole.l { translate: -94px -20px; }
.mstage[data-phase="3"] .pole.r { translate: 94px -20px; }
/* Phase 4: Zytokinese – zwei Tochterzellen */
.mstage[data-phase="4"] .mc.a { translate: -108px 0; scale: .92; }
.mstage[data-phase="4"] .mc.b { translate: 108px 0; scale: .92; }
.mstage[data-phase="4"] .nuc.a { translate: -108px 0; }
.mstage[data-phase="4"] .nuc.b { translate: 108px 0; }
.mstage[data-phase="4"] .chr b:nth-child(1) { translate: -108px 0; }
.mstage[data-phase="4"] .chr b:nth-child(2) { translate: 108px 0; }
.mstage[data-phase="4"] .pole.l { translate: -108px -10px; }
.mstage[data-phase="4"] .pole.r { translate: 108px -10px; }

@media (max-width: 760px) {
  .mstage { transform: scale(.8); height: 220px; }
}

/* Zelltypen (js/data/cells.js): jede Zelle trägt ein anderes Muster im Zytoplasma – gilt für die Spielerzelle (#cell) und die Vorschau (.mini) */
.ct-muscle .cell-cyto {                                            /* Muskelfasern: parallele Streifen */
  animation: none; opacity: .6;
  background: repeating-linear-gradient(0deg, transparent 0 9px, rgba(255, 255, 255, .6) 9px 10.5px);
}
.ct-plasma .cell-cyto {                                            /* viel raues ER: Ringe wie gestapelte Säcke */
  animation: none; opacity: .6;
  background: repeating-radial-gradient(circle at 50% 50%, transparent 0 10px, rgba(255, 255, 255, .55) 10px 11.5px);
}
.ct-macrophage .cell-stream {                                      /* viele Lysosomen: größere Körnchen */
  opacity: .85;
  background:
    radial-gradient(circle, rgba(255, 255, 255, .95) 1.6px, transparent 2.6px) 0 0 / 23px 23px,
    radial-gradient(circle, hsl(var(--hue) 70% 36% / .6) 2.8px, transparent 3.8px) 7px 11px / 31px 31px;
}
/* In der kleinen Vorschau der Zellwahl sind die Muster gröber, damit man sie noch sieht */
.mini.sm.ct-muscle .cell-cyto { background: repeating-linear-gradient(0deg, transparent 0 17px, rgba(255, 255, 255, .8) 17px 21px); opacity: .85; }
.mini.sm.ct-plasma .cell-cyto { background: repeating-radial-gradient(circle at 50% 50%, transparent 0 19px, rgba(255, 255, 255, .8) 19px 23px); opacity: .85; }
.mini.sm.ct-macrophage .cell-stream { background: radial-gradient(circle, rgba(255, 255, 255, .95) 3px, transparent 4.5px) 0 0 / 30px 30px, radial-gradient(circle, hsl(var(--hue) 70% 36% / .7) 5px, transparent 6.5px) 9px 14px / 40px 40px; opacity: .95; }